怎么在html5中使用Canvas自定義路徑動(dòng)畫？針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

創(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ò)營銷,網(wǎng)絡(luò)優(yōu)化,牟平網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

創(chuàng)建Path

制作動(dòng)畫前，先要拿到動(dòng)畫的路徑，對此我們可以直接使用svg的path定義規(guī)則，比如我們定義了一條較為復(fù)雜的路徑（它到底長什么樣大家可以自己試試，這里就不展示了），然后，我們需要將定義好的路徑導(dǎo)入進(jìn)一個(gè)新生成的path元素中（我們只是借助svg的api，因此并不需要將其插到頁面內(nèi)）

const path = 'M0,0 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z';

const pathElement = document.createElementNS('http://www.w3.org/2000/svg',"path"); 
pathElement.setAttributeNS(null, 'd', path);

getTotalLength與getPointAtLength

SVGPathElement提供的這兩個(gè)api很關(guān)鍵，可以說它是實(shí)現(xiàn)路徑動(dòng)畫的最為核心的地方（在svg內(nèi)實(shí)現(xiàn)自定義路徑動(dòng)畫一般也是通過這兩個(gè)api去解決）詳情請戳：SVGPathElement MDN

getTotalLength方法可以獲取SVGPathElement的總長度

getPointAtLength方法，傳入一個(gè)長度x，將返回距離SVGPathElement起點(diǎn)的長度為x的終點(diǎn)坐標(biāo)。

利用這兩個(gè)api，通過循環(huán)的方式不斷去更新canvas內(nèi)所繪制的圖形坐標(biāo)，即可實(shí)現(xiàn)路徑動(dòng)畫：

const length = pathElement.getTotalLength();
const duration = 1000; // 動(dòng)畫總時(shí)長
const interval = length / duration;
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
let time = 0, step = 0; 

const timer = setInterval(function() {
  if (time <= duration) {
    const x = parseInt(pathElement.getPointAtLength(step).x);
    const y = parseInt(pathElement.getPointAtLength(step).y);
    move(x, y);  // 更新canvas所繪制圖形的坐標(biāo)
    step++;
  } else {
    clearInterval(timer)
  }
}, interval);

function move(x, y) {
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.beginPath();
   context.arc(x, y, 25, 0, Math.PI*2, true);
   context.fillStyle = '#f0f';
   context.fill();
   context.closePath();
}

最后，我們把它封裝一下，即可實(shí)現(xiàn)一個(gè)在canvas中實(shí)現(xiàn)自定義動(dòng)畫的簡易函數(shù)啦：

function customizePath(path, func) {
    const pathElement = document.createElementNS('http://www.w3.org/2000/svg',"path"); 
    pathElement.setAttributeNS(null, 'd', path);
      const length = pathElement.getTotalLength();
    const duration = 1000; 
    const interval = length / duration;
    let time = 0, step = 0; 
  
      const timer = setInterval(function() {
        if (time <= duration) {
              const x = parseInt(pathElement.getPointAtLength(step).x);
              const y = parseInt(pathElement.getPointAtLength(step).y);
              func(x, y);
              step++;
        } else {
              clearInterval(timer)
        }
     }, interval);
}

const path = 'M0,0 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z';
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
function move(x, y) {
      context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
      context.arc(x, y, 25, 0, Math.PI*2, true);
      context.fillStyle = '#f0f';
      context.fill();
      context.closePath();
}
customizePath(path, move);

關(guān)于怎么在html5中使用Canvas自定義路徑動(dòng)畫問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。