小编给大家分享一下怎么使用canvas绘制折线路径动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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

需要计算子路径，这块计算比较复杂。（当然是可以实现的）

渐变的计算， 从图中可以看出，动画的子路径是有渐变效果的，如果要分段计算渐变也很复杂。

绘制灰色路径

绘制路径的代码比较简单，此处就不详细说明，下面代码就模拟了了一个折线路径的绘制：

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等于0ctx.clip();...ctx.stroke();

clip之后，亮色路径就只会绘制一部分

动画效果

通过不断变化offset的值，就可以大道亮色路径移动的效果，代码如下：

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

我们知道渐变没法沿着任意路径，如果计算折线，分段计算渐变又很麻烦。 其实在本案例中，虽然是折线，但是整体的运动方向总是从左往右的，所以可以用从左往右的渐变来近似模拟既可以：

functioncreateGradient(ctx,x0,y0,x1,y1){vargrd=ctx.createLinearGradient(x0,y0,x1,y1);grd.addColorStop(0,'#129ab3');grd.addColorStop(1,"#19b5fe");returngrd;}ctx.strokeStyle=createGradient(ctx,offset,0,offset+100,0);

全部代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>lineanimate</title><style>canvas{border:1pxsolid#000;}</style></head><body><canvasid="canvas"width="600"height="400"></canvas><script>varctx=document.getElementById('canvas').getContext('2d');varw=canvas.width,h=canvas.height;varx=w/2,y=h/2;functionsetupCanvas(canvas){letwidth=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);varoffset=100;functioncreateGradient(ctx,x0,y0,x1,y1){vargrd=ctx.createLinearGradient(x0,y0,x1,y1);grd.addColorStop(0,'#9a12b3');grd.addColorStop(1,"#19b5fe");returngrd;}functionanimate(){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>

以上是“怎么使用canvas绘制折线路径动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！