html5中怎么使用canvas实现简单连线动画

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

step1：绘制点

首先创建个标签
设置几个点的坐标：

  const points = [        [200, 100], //上        [300, 200], //右        [100, 200], //左        [200, 100], //上        [200, 300], //下        [100, 200], //左        [300, 200], //右        [200, 300]      ];      const canvas = document.querySelector("canvas");      const ctx = canvas.getContext("2d");

然后把点给画出来：

points.forEach(([x, y]) => {          drawDot(x, y);        });function drawDot(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：绘制线条

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

function drawLine(x1, y1, x2, y2) {          ctx.save();          ctx.beginPath(); //不写每次都会重绘上次的线          ctx.lineCap = "round";          ctx.lineJoin = "round";          var grd = 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控制速度：

function lineMove(points) {          if (points.length < 2) {                          return;          }          const [[x1, y1], [x2, y2]] = points;          let dx = x2 - x1;          let dy = y2 - y1;          if (Math.abs(dx) < 1 && Math.abs(dy) < 1) {            points = points.slice(1);            lineMove(points);            return;          }          let x = x1,            y = y1; //线条绘制过程中的终点          if (dx === 0) {            (x = x2), (y += (speed * dy) / Math.abs(dy));          } else if (dy === 0) {            x += (speed * dx) / Math.abs(dx);            y = y2;          } else if (Math.abs(dx) >= 1) {            let rate = 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);          });        }

完整代码：

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