canvas动画之动态绘出六边形

小说:永胜娱乐app作者:海戏公陵更新时间:2019-04-19字数:27168

叶扬闻言顿时脚下一绊,差点摔倒在地。最终他们也没去那,现在的北海市大大小小的酒吧夜店都属于龙门罩着,去那打架不是砸自己场子吗。

美高梅官方网站是传销组织吗

“胡兄弟大可放心,林风只是看看而已。”说完迈开大步直奔三元山方向而去,唐牛、飞天燕子闪身跟在身后。
两边的士兵一拥而上要来绑这个川军军官,那军官站起来喊道:“师座,不劳你动手,老子去阵地上跟鬼子拼了!”

娜洁希坦才刚刚说完一直躺在床上的雷欧奈便开口将娜洁希坦后面要说的都说了出来:

先上 demo:

http://en.jsrun.net/W5iKp/show

这两天我一直在研究这个动画,花了大量的时间来想是如何实现的,

一开始我是想在进入 canvas 时按时间来用 lineTo 绘出六边形,退出时反方向再绘出白色的一条线;

想这样:

function getSpeed(x, y) {
    if (x < 100) {
        if (y > 150) {
            vx = Math.sqrt(3)
        } else if (y > 50) {
            vx = 0;
        } else {
            vx = -Math.sqrt(3);
        }
        vy = 1
    } else {
        if (y < 50) {
            vx = -Math.sqrt(3);
        } else if (y < 150) {
            vx = 0;
        } else {
            vx = Math.sqrt(3)
        }
        vy = -1;
    }
    return { Vx: vx, Vy: vy };


}

进入canvas 根据 x,y 的坐标获取不同的速度;

然后再实现的过程中发现了很多问题,比如在在pixelRatio为1.x的屏幕上,线条显示粗细的问题,在绘制的时候会出现毛边效果,也会出现线条过粗的情况;

首先解决这个问题我是用 重置高度来实现的 ,如果换成context.clearRect(0,0, 200, 200)线条就会发生变化

也可以用

canvas.width = width * window.devicePixelRatio
canvas.style.width = width + "px";

来改变,这个 three.js 的解决方案,

后来和我同学交流了一下,他告诉了我一个我没用过的 api:

setLineDash

这是链接:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash;

这确实是一个更好的方案,以前没发现这个,今天下午趁着空做好了这个动画:

html:

<canvas id="canvas" width="200" height="200" style="border:1px solid #000"></canvas>

js:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");


var offset;
var flag = true;

function animate() {
    var myAnimation = requestAnimationFrame(animate);

    offset += (flag === true) ? 10 : -10;

    if (offset >= 0) {
        offset = 0;
    }
    if (offset <= -600) {
        offset = -600
        cancelAnimationFrame(myAnimation);
    }

    canvas.height = 200;

    context.strokeStyle = "#000";
    context.moveTo(100, 200);
    context.lineTo(100 + 50 * (Math.sqrt(3)), 150);
    context.lineTo(100 + 50 * (Math.sqrt(3)), 50);
    context.lineTo(100, 0);
    context.lineTo(100 - 50 * (Math.sqrt(3)), 50);
    context.lineTo(100 - 50 * (Math.sqrt(3)), 150);
    context.closePath();
    context.setLineDash([600, 600]);
    context.lineDashOffset = -offset;
    context.stroke();
}

canvas.addEventListener("mouseenter", function() {
    offset = -600;
    flag = true
    animate();
})
canvas.addEventListener("mouseleave", function() {
    flag = false;

})

 

如果不懂

 context.setLineDash([600, 600]);
 context.lineDashOffset = -offset;
这两个是什么意思可以看看文档,确实是一个好用的东西;
本地 demo:

 

 

编辑:杜建

发布时间:2019-04-19 00:28:17

当前文章://unog5ris/index.html

mgm娱乐用户登陆 ca88下载 美高梅手机版58588 澳门百老汇酒店介绍和图片 ag视讯刷反水 mr007亿万先生 澳门博彩送彩金网站_澳门博彩_澳门博彩注册彩金 宝运莱易博官方网运【知名品牌】 

我要说两句: (0人参与)

发布