canvas中普通動效與粒子動效的實作程式碼範例

canvas用於在網頁上繪製圖像、動畫，可以將其理解為畫布，在這個畫布上建立想要的效果。

canvas可以繪製動態效果，除了常用的規則動畫之外，還可以採用粒子的概念來實現較複雜的動效，本文分別採用普通動效與粒子特效實現了一個簡單的時鐘。

普通動效即利用canvas的api，實現有規則的圖案、動畫。

效果

此效果實現比較簡單，主要分析一下刻度與指針角度偏移的實現。

此例為小時刻度的繪製：錶盤上共有12個小時，Math.PI為180°，每小時佔據30°。

.save()表示保存canvas目前環境的狀態，在此基礎上進行繪製。繪製完成之後，傳回先前儲存過的路徑狀態和屬性。

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

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

以秒針為例：取得目前時間的秒數，並計算對應的偏移角度

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

canvas可以用來繪製複雜，不規則的動畫。粒子特效可以用來達到複雜、隨機的動態效果。

粒子，指影像資料imageData中的每一個像素點，取得到每個像素點之後，新增屬性或事件對區域內的粒子進行交互，達到動態效果。

效果

以下圖的圖片轉換為例，效果是先在canvas上渲染圖片，然後取得文字所在區域的每個像素點。

 let image = new Image(); image.src='../image/logo.png'; let pixels=[]; //儲存像素資料let imageData; image.width = 300; image.height = 300 //渲染圖片，並取得該區域內像素資訊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，共有90,000個像素，每個像素佔4位，存放rgba資料。

 function getPixels(){ var pos=0; var data=imageData.data; //RGBA的一維陣列資料//來源影像的高度和寬度為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, //重新設定每個像素的位置資訊y:(canvas.height-image.height)/2+i+Math.random()*20, //重新設定每個像素的位置資訊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.width,canvas.width,canvas.width,canvas.width,canvas.width,canvas.width. 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); } }

渲染文字時鐘

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

效果

文字轉換粒子概念同上，取得選定區域的像素，依照篩選條件進行選擇並存入陣列。經過遍歷後重新繪製。

 function getPixels(){ let imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight); let data = imgData.data pixelsArr = [] for(letArr = [] 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, //重新設定每個像素的位置資訊y:i+Math.random()*20, //重新設定每個像素的位置資訊fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', '+(data[pos+3])+')' }; pixelsArr.push(pixel); } } } }

imgData保存了所選區域內的像素訊息，每個像素點佔據4位，保存了RGBA四位資訊。篩選每個像素的第四位，這段程式碼中將所有透明度不為0的像素都儲存到了陣列pixelsArr中。

x 、 y記載了該粒子的位置信息，為了產生效果圖中的運動效果，給每個粒子添加了0-20個像素的偏移位置，每次重繪時，偏移位置隨機生成，產生運動效果。

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

 function drawPixels() { // 清除畫布內容，進行重繪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); } }

粒子重繪時的樣式為篩選像素時原本的顏色與透明度，且每個在畫布上繪製每個粒子時，定義大小參數r，r取值為0-4中隨機的數字。最終產生的粒子大小隨機。

取得粒子並成功重繪之後，需要頁面即時刷新時間。這裡採用window.requestAnimationFrame(callback)方法。

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

window.requestAnimationFrame(callback)方法告訴瀏覽器您希望執行動畫並請求瀏覽器在下次重繪之前呼叫指定的函數來更新動畫。這個方法使用一個回呼函數作為參數，這個回呼函數會在瀏覽器重繪之前被呼叫。

此方法不需要設定時間間隔，呼叫頻率採用系統時間間隔（1s）。

文件解釋戳這裡

效果

本文主要透過兩種不同的方式實現了時鐘的動態效果，其中粒子時鐘具有更多的可操作性。在以後的canvas系列中會針對粒子系統實現更多的動態效果。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。