html中如何用canvas標(biāo)簽實(shí)現(xiàn)普通動(dòng)效與粒子動(dòng)效

今天小編給大家分享一下html中如何用canvas標(biāo)簽實(shí)現(xiàn)普通動(dòng)效與粒子動(dòng)效的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

canvas用于在網(wǎng)頁上繪制圖像、動(dòng)畫，可以將其理解為畫布，在這個(gè)畫布上構(gòu)建想要的效果。

普通時(shí)鐘

普通動(dòng)效即利用canvas的api，實(shí)現(xiàn)有規(guī)則的圖案、動(dòng)畫。

繪制刻度

此例為小時(shí)刻度的繪制：表盤上共有12個(gè)小時(shí)，Math.PI為180°，每小時(shí)占據(jù)30°。
.save()表示保存canvas當(dāng)前環(huán)境的狀態(tài)，在此基礎(chǔ)上進(jìn)行繪制。繪制完成之后，返回之前保存過的路徑狀態(tài)和屬性。

分鐘刻度同理，改變角度與樣式即可。

  // 小時(shí)時(shí)間刻度
  offscreenCanvasCtx.save();
  for (var i = 0; i < 12; i++) {
    offscreenCanvasCtx.beginPath();
    // 刻度顏色
    offscreenCanvasCtx.strokeStyle = '#fff';
    // 刻度寬度
    offscreenCanvasCtx.lineWidth = 3;
    // 每小時(shí)占據(jù)30°
    offscreenCanvasCtx.rotate(Math.PI / 6);
    // 開始繪制的位置
    offscreenCanvasCtx.lineTo(140, 0)
    // 結(jié)束繪制的位置;
    offscreenCanvasCtx.lineTo(120, 0);
    // 繪制路徑
    offscreenCanvasCtx.stroke();
  }
  offscreenCanvasCtx.restore();

指針指向

以秒針為例：獲取當(dāng)前時(shí)間的秒數(shù)，并計(jì)算對(duì)應(yīng)的偏移角度

  var now = new Date(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hr = now.getHours();
  hr = hr > 12 ? hr - 12 : hr;
  
  //秒針
  offscreenCanvasCtx.save();
  offscreenCanvasCtx.rotate(sec * (Math.PI / 30));
  ......
  offscreenCanvasCtx.stroke();

粒子動(dòng)效

canvas可以用來繪制復(fù)雜，不規(guī)則的動(dòng)畫。粒子特效可以用來實(shí)現(xiàn)復(fù)雜、隨機(jī)的動(dòng)態(tài)效果。

粒子，指圖像數(shù)據(jù)imageData中的每一個(gè)像素點(diǎn)，獲取到每個(gè)像素點(diǎn)之后，添加屬性或事件對(duì)區(qū)域內(nèi)的粒子進(jìn)行交互，達(dá)到動(dòng)態(tài)效果。

粒子獲取

以下圖的圖片轉(zhuǎn)化為例，該效果是先在 canvas 上渲染圖片，然后獲取文字所在區(qū)域的每個(gè)像素點(diǎn)。

let image = new Image();
  image.src='../image/logo.png';
  let pixels=[]; //存儲(chǔ)像素?cái)?shù)據(jù)
  let imageData;
  image.width = 300;
  image.height = 300
  // 渲染圖片，并獲取該區(qū)域內(nèi)像素信息
  image.onload=function(){
    ctx.drawImage(image,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height);
    imageData=ctx.getImageData((canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height); //獲取圖表像素信息
 //繪制圖像
  };

像素信息

圖片的大小為300*300，共有90000個(gè)像素，每個(gè)像素占4位，存放rgba數(shù)據(jù)。

粒子繪制

function getPixels(){
    var pos=0;
    var data=imageData.data; //RGBA的一維數(shù)組數(shù)據(jù)
    //源圖像的高度和寬度為300px
    for(var i=1;i<=image.width;i++){
      for(var j=1;j<=image.height;j++){
        pos=[(i-1)*image.width+(j-1)]*4; //取得像素位置
        if(data[pos]>=0){
          var pixel={
            x:(canvas.width-image.width)/2+j+Math.random()*20, //重新設(shè)置每個(gè)像素的位置信息
            y:(canvas.height-image.height)/2+i+Math.random()*20, //重新設(shè)置每個(gè)像素的位置信息
            fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+','+(data[pos+3])+')'
          }
          pixels.push(pixel);
        }
      }
    }
  }
  function drawPixels() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,canvas.width,canvas.height);
    var len = pixels.length, curr_pixel = null;
    for (var i = 0; i < len; i++) {
      curr_pixel = pixels[i];
      ctx.fillStyle = curr_pixel.fillStyle;
      ctx.fillRect(curr_pixel.x, curr_pixel.y, 1, 1);
    }
  }

粒子時(shí)鐘

渲染文字時(shí)鐘

 function time() {
    ctx.clearRect(0,0,canvas.width,canvas.height)
    ctx.font = "150px 黑體";
    ctx.textBaseline='top';
    ctx.fillStyle = "rgba(245,245,245,0.2)";
    ctx.fillText(new Date().format('hh:mm:ss'),(canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight);
  }

獲取粒子

文字轉(zhuǎn)換粒子概念同上，獲取選定區(qū)域的像素，根據(jù)篩選條件進(jìn)行選擇并存入數(shù)組。經(jīng)過遍歷后重新繪制。

 function getPixels(){
    let imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight);
    let data = imgData.data
    pixelsArr = []
    for(let i=1;i<=textHeight;i++){
      for(let j=1;j<=textWidth;j++){
        pos=[(i-1)*textWidth+(j-1)]*4; //取得像素位置
        if(data[pos]>=0){
          var pixel={
            x:j+Math.random()*20, //重新設(shè)置每個(gè)像素的位置信息
            y:i+Math.random()*20, //重新設(shè)置每個(gè)像素的位置信息
            fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+','+(data[pos+3])+')'
          };
          pixelsArr.push(pixel);
        }
      }
    }
  }

imgData保存了所選區(qū)域內(nèi)的像素信息，每個(gè)像素點(diǎn)占據(jù)4位，保存了RGBA四位信息。篩選每個(gè)像素的第四位，這段代碼中將所有透明度不為0的像素都保存到了數(shù)組pixelsArr中。

x、y記載了該粒子的位置信息，為了產(chǎn)生效果圖中的運(yùn)動(dòng)效果，給每個(gè)粒子添加了0-20個(gè)像素的偏移位置，每次重繪時(shí)，偏移位置隨機(jī)生成，產(chǎn)生運(yùn)動(dòng)效果。

粒子重繪

獲取粒子之后，需要清除畫布中原有的文字，將獲取到的粒子重新繪制到畫布上去。 

  function drawPixels() {
    // 清除畫布內(nèi)容，進(jìn)行重繪
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for (let i in pixelsArr) {
      ctx.fillStyle = pixelsArr[i].fillStyle;
      let r = Math.random()*4
      ctx.fillRect(pixelsArr[i].x, pixelsArr[i].y, r, r);
    }
  }

粒子重繪時(shí)的樣式為篩選像素時(shí)原本的顏色與透明度，并且每個(gè)在畫布上繪制每個(gè)粒子時(shí)，定義大小參數(shù)r，r取值為0-4中隨機(jī)的數(shù)字。最終生成的粒子大小隨機(jī)。

實(shí)時(shí)刷新

獲取粒子并成功重繪之后，需要頁面實(shí)時(shí)刷新時(shí)間。這里采用window.requestAnimationFrame(callback)方法。

  function time() {
    ......
    getpixels(); //獲取粒子
    drawPixels(); // 重繪粒子
    requestAnimationFrame(time);
  }

window.requestAnimationFrame(callback) 方法告訴瀏覽器您希望執(zhí)行動(dòng)畫并請(qǐng)求瀏覽器在下一次重繪之前調(diào)用指定的函數(shù)來更新動(dòng)畫。該方法使用一個(gè)回調(diào)函數(shù)作為參數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在瀏覽器重繪之前調(diào)用。

該方法不需要設(shè)置時(shí)間間隔，調(diào)用頻率采用系統(tǒng)時(shí)間間隔（1s）。

以上就是“html中如何用canvas標(biāo)簽實(shí)現(xiàn)普通動(dòng)效與粒子動(dòng)效”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。