這篇文章將為大家詳細(xì)講解有關(guān)使用canvas怎么繪制一個(gè)連線動(dòng)畫(huà)，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),梁園企業(yè)網(wǎng)站建設(shè),梁園品牌網(wǎng)站建設(shè),網(wǎng)站定制,梁園網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,梁園網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

step1：繪制點(diǎn)

首先創(chuàng)建個(gè)標(biāo)簽
設(shè)置幾個(gè)點(diǎn)的坐標(biāo)

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

然后把點(diǎn)給畫(huà)出來(lái)

points.forEach(([x, y]) => {
          drawDot(x, y);
        });
function drawDot(x1, y1, r) {
          ctx.save();
          ctx.beginPath(); //不寫(xiě)會(huì)和線連起來(lái)
          ctx.fillStyle = "red";
          //繪制成矩形
          ctx.arc(x1, y1, r ? r : 2, 0, 2 * Math.PI);
          ctx.fill();
          ctx.restore();
        }

step2：繪制線條

我們封裝一個(gè)方法,傳入起點(diǎn)終點(diǎn)，繪制一根線條

function drawLine(x1, y1, x2, y2) {
          ctx.save();
          ctx.beginPath(); //不寫(xiě)每次都會(huì)重繪上次的線
          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：線條動(dòng)畫(huà)

這里面需要計(jì)算兩點(diǎn)之間的斜率，然后x坐標(biāo)每次挪動(dòng)±1單位，已知斜率和x偏移，即可計(jì)算出y的偏移。值得注意的是，這個(gè)坐標(biāo)系和數(shù)學(xué)中的xy坐標(biāo)系有點(diǎn)不一樣，y軸是反的。然后可以引入額外的參數(shù)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; //線條繪制過(guò)程中的終點(diǎn)
          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);
          });
        }

主要代碼就這么多，先看效果

完整代碼

關(guān)于使用canvas怎么繪制一個(gè)連線動(dòng)畫(huà)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

名稱(chēng)欄目：使用canvas怎么繪制一個(gè)連線動(dòng)畫(huà)-創(chuàng)新互聯(lián)
URL鏈接：http://weahome.cn/article/dcjeic.html