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;
這兩個是什么意思可以看看文檔,確實是一個好用的東西;