App下載

如何使用canvas繪制折線路徑動畫?案例分享!

猿友 2021-07-29 15:49:01 瀏覽數(shù) (2641)
反饋

今天和大家分享個有關(guān)于:“如何使用canvas繪制折線路徑動畫?案例分享!”這方面的相關(guān)內(nèi)容,下面是小編整理的相關(guān)內(nèi)容!

最近有讀者加我微信咨詢這個問題:

其中的效果是一個折線路徑動畫效果,如下圖所示:

要實現(xiàn)以上路徑動畫,一般可以使用svg的動畫功能?;蛘呤褂胏anvas繪制,結(jié)合路徑數(shù)學(xué)計算來實現(xiàn)。
如果用canvas來繪制,其中的難點在于:

  • 需要計算子路徑,這塊計算比較復(fù)雜。(當(dāng)然是可以實現(xiàn)的)
  • 漸變的計算, 從圖中可以看出,動畫的子路徑是有漸變效果的,如果要分段計算漸變也很復(fù)雜。

本文介紹一種思路,使用clip方法,動態(tài)移動clip的區(qū)域,來達到近似的效果。具體怎么做。

繪制灰色路徑

繪制路徑的代碼比較簡單,此處就不詳細說明,下面代碼就模擬了了一個折線路徑的繪制:

 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.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(); 

效果如下:

clip控制亮色路徑的繪制區(qū)域

canvas的clip方法可以控制繪制的區(qū)域,通過該方法,可以控制智繪制路徑的一部分:

     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>

總結(jié)

其實整體思路是用了近似,而不是嚴(yán)格的控制路徑長度和漸變效果,這樣可以更方便實現(xiàn)以上功能。  其實人眼有時候是分辨不出來一些細節(jié),可視化,有的時候只有能夠達到讓人“覺得”是那么回事,其實目的也就達到了。
以上方案只能適用于,折線路徑的整體方向是一致的。如果整體方向是先水平向右,然后在垂直向下,或者甚至出現(xiàn)往回拐的情況,就不適合了。

通過上面這篇文章的分享想必大家對于:“如何使用canvas繪制折線路徑動畫?案例分享!”這方面的內(nèi)容有所了解了吧!當(dāng)然了在html5中相關(guān)的內(nèi)容不僅僅如此,更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進行學(xué)習(xí)和了解! 


0 人點贊