canvas繪製折線路徑動畫

時間 2021-05-09

標籤 html canvas 微信 svg 動畫 spa rest code htm 欄目 HTML 简体版

原文原文鏈接

最近有讀者加我微信諮詢這個問題：
html

其中的效果是一個折線路徑動畫效果，以下圖所示：
canvas

要實現以上路徑動畫，通常可使用svg的動畫功能。或者使用canvas繪製，結合路徑數學計算來實現。微信

若是用canvas來繪製，其中的難點在於：svg

須要計算子路徑，這塊計算比較複雜。（固然是能夠實現的）
漸變的計算，從圖中能夠看出，動畫的子路徑是有漸變效果的，若是要分段計算漸變也很複雜。

本文介紹一種思路，使用clip方法，動態移動clip的區域，來達到近似的效果。具體怎麼作。動畫

繪製灰色路徑

繪製路徑的代碼比較簡單，此處就不詳細說明，下面代碼就模擬了了一個折線路徑的繪製：spa

ctx.beginPath();    
 ctx.moveTo(100,100);
 ctx.lineTo(200,100);
 ctx.lineTo(230,200);
 ctx.lineTo(250,50);
 ctx.lineTo(270,180);
 ctx.lineTo(300,60);
 ctx.lineTo(330,160);
 ctx.lineTo(350,60);
 ctx.lineTo(380,100);
 ctx.lineTo(480,100);
 ctx.strokeStyle = "gray";
 ctx.lineJoin = "round";
 ctx.stroke();

效果以下:rest

繪製亮色路徑

繪製亮色路徑的代碼和繪製灰色路徑的代碼同樣，只是樣式是一個亮的顏色：code

ctx.save();
            ctx.beginPath();    
            ctx.moveTo(100,100);
            ctx.lineTo(200,100);
            ctx.lineTo(230,200);
            ctx.lineTo(250,50);
            ctx.lineTo(270,180);
            ctx.lineTo(300,60);
            ctx.lineTo(330,160);
            ctx.lineTo(350,60);
            ctx.lineTo(380,100);
            ctx.lineTo(480,100);
            ctx.strokeStyle = "gray";
            ctx.lineJoin = "round";
            ctx.stroke();

效果以下：
htm

clip控制亮色路徑的繪製區域

canvas的clip方法能夠控制繪製的區域，經過該方法，能夠控制智繪製路徑的一部分：ip

ctx.beginPath();
        ctx.rect(offset,0,100,500); // offset 等於0
        ctx.clip();
           ...
        ctx.stroke();

clip以後，亮色路徑就只會繪製一部分,以下圖：

動畫效果

經過不斷變化offset的值，就能夠大道亮色路徑移動的效果，代碼以下：

offset += 2;
 if(offset > 600){
       offset = 100;
 }
requestAnimationFrame(animate);

最終效果以下：

漸變

咱們知道漸變無法沿着任意路徑，若是計算折線，分段計算漸變又很麻煩。其實在本案例中，雖然是折線，可是總體的運動方向老是從左往右的，因此能夠用從左往右的漸變來近似模擬既能夠：

function createGradient(ctx,x0,y0,x1,y1){
          var grd = ctx.createLinearGradient(x0,y0,x1,y1);
           grd.addColorStop(0,'#129ab3');
           grd.addColorStop(1,"#19b5fe");
           return grd;
}

ctx.strokeStyle = createGradient(ctx,offset,0,offset + 100,0);

最終效果以下所示：

所有代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>line animate</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
        var ctx = document.getElementById( 'canvas' ).getContext( '2d' );
        var w = canvas.width,
                h = canvas.height;

        var x = w / 2,y = h / 2;

        function setupCanvas(canvas) {
            let width = canvas.width,
            height = canvas.height,
            dpr = window.devicePixelRatio || 1.0;
            if (dpr != 1.0 ) {
            canvas.style.width = width + "px";
            canvas.style.height = height + "px";
            canvas.height = height * dpr;
            canvas.width = width * dpr;
            ctx.scale(dpr, dpr);
            }
        }
        setupCanvas(canvas);
        var offset = 100;
        function createGradient(ctx,x0,y0,x1,y1){
           var grd = ctx.createLinearGradient(x0,y0,x1,y1);
           grd.addColorStop(0,'#9a12b3');
           grd.addColorStop(1,"#19b5fe");
           return grd;
        }

        function animate(){
            ctx.fillStyle = "black";
            ctx.fillRect(0,0,canvas.width,canvas.height);
            ctx.lineWidth = 3;
            ctx.save();
            ctx.beginPath();    
            ctx.moveTo(100,100);
            ctx.lineTo(200,100);
            ctx.lineTo(230,200);
            ctx.lineTo(250,50);
            ctx.lineTo(270,180);
            ctx.lineTo(300,60);
            ctx.lineTo(330,160);
            ctx.lineTo(350,60);
            ctx.lineTo(380,100);
            ctx.lineTo(480,100);
            ctx.strokeStyle = "gray";
            ctx.lineJoin = "round";
            ctx.stroke(); 

            ctx.beginPath();
            ctx.rect(offset,0,150,500);
            ctx.clip();
            ctx.beginPath();
            ctx.moveTo(100,100);
            ctx.lineTo(200,100);
            ctx.lineTo(230,200);
            ctx.lineTo(250,50);
            ctx.lineTo(270,180);
            ctx.lineTo(300,60);
            ctx.lineTo(330,160);
            ctx.lineTo(350,60);
            ctx.lineTo(380,100);
            ctx.lineTo(480,100);
            ctx.lineWidth = 4;
            ctx.strokeStyle = createGradient(ctx,offset,0,offset + 150,0);
            ctx.lineCap = "round";
            // ctx.globalCompositeOperation = 'lighter';
            ctx.lineJoin = "round";
            ctx.stroke(); 

            ctx.restore();

            offset += 2;
            if(offset > 600){
                offset = 100;
            }

            requestAnimationFrame(animate);
        }

        animate();
    </script>
</body>
</html>