canvas动画之动态绘出六边形

先上 demo:

https://grewer.github.io/JsDemo/canvasLine/

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

一开始我是想在进入 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;
这两个是什么意思可以看看文档,确实是一个好用的东西;