这篇“html5中怎么使用canvas实现简单连线动画”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“html5中怎么使用canvas实现简单连线动画”文章吧。

step1：绘制点

首先创建个标签<canvas id="canvas"></canvas>
设置几个点的坐标：

constpoints=[[200,100],//上[300,200],//右[100,200],//左[200,100],//上[200,300],//下[100,200],//左[300,200],//右[200,300]];constcanvas=document.querySelector("canvas");constctx=canvas.getContext("2d");

然后把点给画出来：

points.forEach(([x,y])=>{drawDot(x,y);});functiondrawDot(x1,y1,r){ctx.save();ctx.beginPath();//不写会和线连起来ctx.fillStyle="red";//绘制成矩形ctx.arc(x1,y1,r?r:2,0,2*Math.PI);ctx.fill();ctx.restore();}

step2：绘制线条

我们封装一个方法,传入起点终点，绘制一根线条

functiondrawLine(x1,y1,x2,y2){ctx.save();ctx.beginPath();//不写每次都会重绘上次的线ctx.lineCap="round";ctx.lineJoin="round";vargrd=ctx.createLinearGradient(x1,y1,x2,y2);ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.closePath();ctx.strokeStyle="rgba(255,255,255,1)";ctx.stroke();ctx.restore();}

step3：线条动画

这里面需要计算两点之间的斜率，然后x坐标每次挪动±1单位，已知斜率和x偏移，即可计算出y的偏移。值得注意的是，这个坐标系和数学中的xy坐标系有点不一样，y轴是反的。然后可以引入额外的参数speed控制速度：

functionlineMove(points){if(points.length<2){return;}const[[x1,y1],[x2,y2]]=points;letdx=x2-x1;letdy=y2-y1;if(Math.abs(dx)<1&&Math.abs(dy)<1){points=points.slice(1);lineMove(points);return;}letx=x1,y=y1;//线条绘制过程中的终点if(dx===0){(x=x2),(y+=(speed*dy)/Math.abs(dy));}elseif(dy===0){x+=(speed*dx)/Math.abs(dx);y=y2;}elseif(Math.abs(dx)>=1){letrate=dy/dx;x+=(speed*dx)/Math.abs(dx);y+=(speed*rate*dx)/Math.abs(dx);}drawLine(x1,y1,x,y);points[0]=[x,y];window.requestAnimationFrame(function(){lineMove(points);});}

完整代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>canvas-连线动画</title></head><body><canvasid="canvas"width="400"height="400"></canvas><script>//起点：10，20终点：150，200constpoints=[[200,100],//上[300,200],//右[100,200],//左[200,100],//上[200,300],//下[100,200],//左[300,200],//右[200,300]];constcanvas=document.querySelector("canvas");constctx=canvas.getContext("2d");//constimg=newImage();constspeed=10;//速度//img.onload=function(){//canvas.width=img.width;//canvas.height=img.height;animate(ctx);//};//img.src="./imgs/demo.png";functionanimate(ctx){//ctx.drawImage(img,0,0);ctx.fillRect(0,0,canvas.width,canvas.height);points.forEach(([x,y])=>{drawDot(x,y);});lineMove(points);}functionlineMove(points){if(points.length<2){return;}const[[x1,y1],[x2,y2]]=points;letdx=x2-x1;letdy=y2-y1;if(Math.abs(dx)<1&&Math.abs(dy)<1){points=points.slice(1);lineMove(points);return;}letx=x1,y=y1;//线条绘制过程中的终点if(dx===0){(x=x2),(y+=(speed*dy)/Math.abs(dy));}elseif(dy===0){x+=(speed*dx)/Math.abs(dx);y=y2;}elseif(Math.abs(dx)>=1){letrate=dy/dx;x+=(speed*dx)/Math.abs(dx);y+=(speed*rate*dx)/Math.abs(dx);}drawLine(x1,y1,x,y);points[0]=[x,y];window.requestAnimationFrame(function(){lineMove(points);});}functiondrawLine(x1,y1,x2,y2){ctx.save();ctx.beginPath();//不写每次都会重绘上次的线ctx.lineCap="round";ctx.lineJoin="round";vargrd=ctx.createLinearGradient(x1,y1,x2,y2);ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.closePath();ctx.strokeStyle="rgba(255,255,255,1)";ctx.stroke();ctx.restore();}functiondrawDot(x1,y1,r){ctx.save();ctx.beginPath();//不写会和线连起来ctx.fillStyle="red";//绘制成矩形ctx.arc(x1,y1,r?r:2,0,2*Math.PI);ctx.fill();ctx.restore();}</script></body></html>

以上就是关于“html5中怎么使用canvas实现简单连线动画”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。