2019獨角獸企業重金招聘Python工程師標準>>>

周末在家玩了一下canvas粒子動畫，先看看效果，用的圖是我們微眾銀行的干爹‘qq’，先看看效果

##1.獲取圖片信息 ###1.1首先將想要繪制的圖片繪制到canvas畫布上

var drawImg=function(url){var img=new Image();img.src=url;img.onload=function(){imgW=img.width;imgH=img.height;imgStartX=(w-imgW)/2;imgStartY=(h-imgH)/2;context.drawImage(img,imgStartX,imgStartY);particleGenerate(img);draw();}}

###1.2.獲取圖像信息

var data=context.getImageData(imgStartX,imgStartY,imgW,imgH).data;

將第一步繪制的圖像信息通過getImageData讀取，getImageData獲取到的對象中的data屬性里面放的就是圖像的像素信息。每四位數字表示一個像素的信息，為該像素的rgba值。

我們最終是通過一個坐標點繪制一個粒子，因此我們不需要獲得圖像的每個像素信息。因此我們的采樣是有一定步長的。我這里采用的是‘3’

for(var i=0;i<imgH;i+=3){for (var j=0;j<imgW;j+=3){var particle={};//去除透明部分if(data[i*imgW*4+j*4+3]>50){......particles.push(particle);}}}

##2.處理圖像信息 為了避免不必要的繪制操作，我們首先就去掉透明像素部分，而不是在繪制時使用透明畫筆繪制。為了保證一定的容錯率，我選擇是‘50’，而不是0。

if(data[i*imgW*4+j*4+3]>50){particle.fillStyle='rgba('+data[i*imgW*4+j*4]+','+data[i*imgW*4+j*4+1]+','+data[i*imgW*4+j*4+2]+','+data[i*imgW*4+j*4+3]+')';}

將取到的像素信息賦值給canvas的畫筆，這里有個優化的點。如果你的圖像顏色很簡單，而且區域分的很明顯，你是沒必要這樣計算每個點的顏色值的。直接取一個點，然后賦值給相應的區域。

##3.繪制的緩動函數 為了讓粒子動畫不要過于死板，我們按照行數，給予不同的延遲；同時每個的x和y方向也給予不同的延遲。我這里使用的是easeInOutQuad

//e:當前幀的時間 //a:初始值 //g:最終值減去初始值 //f:整個動畫持續時間 Math.easeInOutQuad = function (e, a, g, f) {e /= f / 2;if (e < 1) {return g / 2 * e * e + a}e--;return -g / 2 * (e * (e - 2) - 1) + a};

轉載于:https://my.oschina.net/xiaoweibaer/blog/782507

總結

以上是生活随笔為你收集整理的canvas粒子动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。