乐趣区

关于canvas:canvas绘制折线路径动画

jiezi

最近有读者加我微信征询这个问题：

其中的成果是一个折线门路动画成果，如下图所示：

要实现以上门路动画，个别能够应用 svg 的动画性能。或者应用 canvas 绘制，联合门路数学计算来实现。

如果用 canvas 来绘制，其中的难点在于：

  • 须要计算子门路，这块计算比较复杂。（当然是能够实现的）
  • 突变的计算，从图中能够看出，动画的子门路是有突变成果的，如果要分段计算突变也很简单。

本文介绍一种思路，应用 clip 办法，动静挪动 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.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 管制亮色门路的绘制区域

canvas 的 clip 办法能够管制绘制的区域，通过该办法，能够管制智绘制门路的一部分：

        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>

总结

其实整体思路是用了近似，而不是严格的管制门路长度和突变成果，这样能够更不便实现以上性能。其实人眼有时候是分辨不进去一些细节，可视化，有的时候只有可能达到让人“感觉”是那么回事，其实目标也就达到了。

以上计划只能实用于，折线门路的整体方向是统一的。如果整体方向是先程度向右，而后在垂直向下，或者甚至呈现往回拐的状况，就不适宜了。

关注公众号“ITMan 彪叔”能够及时收到更多有价值的文章。另外如果对可视化感兴趣，能够和我交换，微信 541002349.

退出移动版