canvas简单连线动画的实现代码

前言:canvas动画入门系列之简单连线动画。虽然简单,但连线动画应用场景还挺多,因此做了个小demo,一通百通。

step1:绘制点

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

   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);          });        }

主要代码就这么多,先看效果

完整代码

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <meta http-equiv="X-UA-Compatible" content="ie=edge" />  <title>canvas-连线动画</title></head><body>  <canvas id="canvas" width="400" height="400"></canvas>  <script>    //起点:10,20 终点:150,200    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");    // const img = new Image();    const speed = 10; //速度    // img.onload = function() {    // canvas.width = img.width;    // canvas.height = img.height;    animate(ctx);    // };    // img.src = "./imgs/demo.png";    function animate(ctx) {      // ctx.drawImage(img, 0, 0);      ctx.fillRect(0, 0, canvas.width, canvas.height);      points.forEach(([x, y]) => {        drawDot(x, y);      });      lineMove(points);    }    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);      });    }    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();    }    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();    }  </script></body></html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

canvas简单连线动画的实现代码