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>
    

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！