canvas粒子動(dòng)畫詳細(xì)教學(xué)

Canvas粒子動(dòng)畫詳細(xì)教學(xué)我們要實(shí)現(xiàn)的效果就如下圖中操作的那樣，在輸入框中輸入文字（不管中文，還是英文，還是各種表情也好）都可以在canvas畫布中通過眾多的粒子組成，在側(cè)邊欄中還有很多控件，它們可以控制粒子的各方面屬性，以此來形成各種不同的絢麗效果。1.目錄結(jié)構(gòu)2.UI界面UI界面的組成很簡單，主要有側(cè)邊欄控制臺(tái)和canvas畫布兩部分組成<canvasid="canvas"></canvas><divid="control">...</div>在側(cè)邊欄中有一系列的控制條，他們控制著粒子的各種屬性，包括文字輸入框：<inputtype="text"id="message"value="hahaha"onchange="change()">控制條<inputtype="range"id="gra"value="0"min="-1"max="1"step="0.1"onchange="changeV()">粒子選擇<pstyle="margin:0020px10px;"><spanid="ball">圓形</span><spanid="rect">方塊</span></p>CSS樣式文件主要是對UI界面的布局和樣式處理，具體請查看代碼文件。3.側(cè)邊欄滑動(dòng)當(dāng)點(diǎn)擊菜單按鈕時(shí)，側(cè)邊欄滑出，再次點(diǎn)擊縮回。采用classList來切換滑出和縮回的class,在sidebar.js中varbtn=document.getElementById("btn");varcontrol=document.getElementById("control");btn.addEventListener('click',function(e){control.classList.toggle("slide");},false)這樣我們的基礎(chǔ)界面就搭建完成。下面就到了我們這個(gè)動(dòng)畫的核心思想4.準(zhǔn)備工作首先，我們在我們的index.js文件中定義我們需要的一些變量varcanvas=document.getElementById('canvas');context=canvas.getContext('2d');W=canvas.width=window.innerWidth;H=canvas.height=window.innerHeight;gridY=7,gridX=7;type="ball";varmessage=document.getElementById('message'),gravity=document.getElementById('gra'),duration=document.getElementById('dur'),speed=document.getElementById('speed'),radius=document.getElementById('rad'),resolution=document.getElementById('res');graVal=parseFloat(gravity.value);durVal=parseFloat(duration.value);spdVal=parseFloat(speed.value);radVal=parseFloat(radius.value);resVal=parseFloat(resolution.value);colors=['#f44336','#e91e63','#9c27b0','#673ab7','#3f51b5','#2196f3','#03a9f4','#00bcd4','#009688','#4CAF50','#8BC34A','#CDDC39','#FFEB3B','#FFC107','#FF9800','#FF5722'];functionchange(){ //...}functionchangeV(){ //...}(functiondrawFrame(){window.requestAnimationFrame(drawFrame,canvas);context.clearRect(0,0,W,H);//...}())注意這里的的context，W，H等我們定義的是全局變量。

這里有兩個(gè)變量可能你不知道他是干什么的gridX和gridY，后面會(huì)詳細(xì)介紹。5.shape.js文件這個(gè)文件是我們整個(gè)動(dòng)畫效果的核心，只有理解了它，你才能了解這個(gè)效果的實(shí)現(xiàn)原理：functionShape(x,y,texte){this.x=x;this.y=y;this.size=200;this.text=texte;this.placement=[];}Stotype.getValue=function(){context.textAlign="center";context.font=this.size+"pxarial";context.fillText(this.text,this.x,this.y);varidata=context.getImageData(0,0,W,H);varbuffer32=newUint32Array(idata.data.buffer);for(varj=0;j<H;j+=gridY){for(vari=0;i<W;i+=gridX){if(buffer32[j*W+i]){varparticle=newParticle(i,j,type);this.placement.push(particle);}}}context.clearRect(0,0,W,H);}接下來，我們詳細(xì)解釋一下代碼，首先我們新建了一個(gè)構(gòu)造函數(shù)Shape，該構(gòu)造函數(shù)有3個(gè)參數(shù):x,y:要繪制的文字的位置texte:要繪制的文字我們設(shè)置了文字的大小為200px,并且定義了一個(gè)屬性placement，這個(gè)屬性是一個(gè)數(shù)組。sowired!它是干什么的呢？別急，繼續(xù)往下走。接下來我們在原型對象上定義了一個(gè)方法getValue.這幾行代碼：context.textAlign="center";context.font=this.size+"pxarial";context.fillText(this.text,this.x,this.y);很簡單，設(shè)置文字對其方式，字體大小，并且通過fillText()在canvas上繪制文字。如果此時(shí)在控制欄中輸入文字，在index.js中新建一個(gè)shape對象，并把文字傳入，再調(diào)用getValue方法就可以看到你已經(jīng)把輸入的文字繪制到了canvas中接下來我們調(diào)用了context.getImageData()，它是canvas繪制圖片的API接口，通過它我們可以得到需要繪制的圖片的數(shù)據(jù)內(nèi)容。也許你會(huì)問，它是用來獲取canvas上繪制的圖片的數(shù)據(jù)內(nèi)容，可是我們這并沒有繪制圖片??？其實(shí)，該方法的作用并不只是局限于獲取圖片的內(nèi)容。只要canvas上有內(nèi)容，不管是繪制的文字，還是圖形它都能獲取，甚至是空白的canvas它也能獲取，只不過此時(shí)的數(shù)據(jù)都是0。那么通過該API獲取的內(nèi)容是什么樣的呢？首先，我們嘗試獲取一張空canvas的內(nèi)容varcanvas=document.getElementById('canvas'),context=canvas.getContext('2d');varimgData=context.getImageData(0,0,canvas.width,canvas.height);console.log(imgData);結(jié)果如下：我們看到，這里的imgData是一個(gè)對象，該對象的第一個(gè)屬性就是data,是一個(gè)8位無符號(hào)整數(shù)的類型化數(shù)組Uint8ClampedArray。打開data看看都有什么，這里隨便打開其中的一個(gè)看看。因?yàn)閏anvas為空，所以數(shù)據(jù)都為零。現(xiàn)在我們換一下，在canvas中畫一個(gè)藍(lán)色的矩形。context.fillStyle="#49f";context.fillRect(0,0,canvas.width,canvas.height);varimgData=context.getImageData(0,0,canvas.width,canvas.height);console.log(imgData);看看，數(shù)據(jù)已經(jīng)不為零了。好，原理解釋的都差不多了，我們回到正題，看下一行代碼。varbuffer32=newUint32Array(idata.data.buffer);idata.data.buffer

,在這里我們調(diào)用Uint8ClampedArray對象的buffer屬性，獲取此數(shù)組引用的

ArrayBuffer。然后將它傳入U(xiǎn)int32Array對象(32位無符號(hào)整數(shù)值的類型化數(shù)組）。此時(shí)，我們看看上面繪制藍(lán)色矩形的數(shù)據(jù)變成什么樣了，首先數(shù)組長度變?yōu)閇160000],剛好是上面的8位的四分之一內(nèi)容變?yōu)橄喈?dāng)于我們把一張圖片的分辨率縮小了，以前有640000個(gè)數(shù)據(jù)，現(xiàn)在只有160000個(gè)數(shù)據(jù)。當(dāng)然，在本文中數(shù)據(jù)的內(nèi)容不是我們所關(guān)心的。我們所關(guān)心的是在哪有數(shù)據(jù)。所以，接下來,就是在有數(shù)據(jù)的地方，放上我們的粒子for(varj=0;j<H;j+=gridY){for(vari=0;i<W;i+=gridX){if(buffer32[j*W+i]){varparticle=newParticle(i,j,type);this.placement.push(particle);}}}context.clearRect(0,0,W,H);//清除所畫內(nèi)容我們遍歷整個(gè)canvas,通過buffer32[j*W+i]來判斷這個(gè)位置的數(shù)據(jù)是否為空，如果不為空，那么，在這繪制一個(gè)粒子。粒子的位置為（i，j）我們作為參數(shù)傳入。當(dāng)然你也可以在數(shù)據(jù)為空的地方放上粒子，看看會(huì)出現(xiàn)什么樣的效果。這里用到了gridX和gridY，它們的作用是來判斷每個(gè)多少個(gè)距離取一次數(shù)據(jù)。學(xué)過信號(hào)抽樣的同學(xué)應(yīng)該很好理解，如果你間隔大，抽樣得到的數(shù)據(jù)就小，反之如果你設(shè)定的間隔小，那么抽到的數(shù)據(jù)就多。在我們的效果中，我們繪制的是文字，同樣的道理，間隔小獲取的數(shù)據(jù)就多，粒子就多，組成的文字就完整。間隔大獲取的就少。那么粒子組成的文字就不那么完整，這兩個(gè)變量的值，通過分辨率控件來綁定?？聪聢D：6.particles.js文件這個(gè)就是粒子文件。7.粒子切換粒子切換的代碼在slide.js中，很簡單，就是綁定了兩個(gè)事件。/粒子切換varball=document.getElementById("ball");varrect=document.getElementById("rect");functionchose(particleName){particl