canvas用于在網(wǎng)頁上繪制圖像、動畫，可以將其理解為畫布，在這個畫布上構(gòu)建想要的效果。
canvas可以繪制動態(tài)效果，除了常用的規(guī)則動畫之外，還可以采用粒子的概念來實現(xiàn)較復(fù)雜的動效，本文分別采用普通動效與粒子特效實現(xiàn)了一個簡單的時鐘。
普通時鐘
普通動效即利用canvas的api，實現(xiàn)有規(guī)則的圖案、動畫。
效果
該效果實現(xiàn)比較簡單，主要分析一下刻度與指針角度偏移的實現(xiàn)。
繪制刻度
此例為小時刻度的繪制：表盤上共有12個小時，Math.PI為180°，每小時占據(jù)30°。
.save()表示保存canvas當(dāng)前環(huán)境的狀態(tài)，在此基礎(chǔ)上進(jìn)行繪制。繪制完成之后，返回之前保存過的路徑狀態(tài)和屬性。
分鐘刻度同理，改變角度與樣式即可。
// 小時時間刻度 offscreenCanvasCtx.save(); for (var i = 0; i < 12; i++) { offscreenCanvasCtx.beginPath(); // 刻度顏色 offscreenCanvasCtx.strokeStyle = '#fff'; // 刻度寬度 offscreenCanvasCtx.lineWidth = 3; // 每小時占據(jù)30° offscreenCanvasCtx.rotate(Math.PI / 6); // 開始繪制的位置 offscreenCanvasCtx.lineTo(140, 0) // 結(jié)束繪制的位置; offscreenCanvasCtx.lineTo(120, 0); // 繪制路徑 offscreenCanvasCtx.stroke(); } offscreenCanvasCtx.restore();指針指向
以秒針為例：獲取當(dāng)前時間的秒數(shù)，并計算對應(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();
粒子動效
canvas可以用來繪制復(fù)雜，不規(guī)則的動畫。粒子特效可以用來實現(xiàn)復(fù)雜、隨機(jī)的動態(tài)效果。
粒子，指圖像數(shù)據(jù)imageData中的每一個像素點，獲取到每個像素點之后，添加屬性或事件對區(qū)域內(nèi)的粒子進(jìn)行交互，達(dá)到動態(tài)效果。
效果
粒子獲取
以下圖的圖片轉(zhuǎn)化為例，該效果是先在canvas上渲染圖片，然后獲取文字所在區(qū)域的每個像素點。
let image = new Image(); image.src='../image/logo.png'; let pixels=[]; //存儲像素數(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個像素，每個像素占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è)置每個像素的位置信息 y:(canvas.height-image.height)/2+i+Math.random()*20, //重新設(shè)置每個像素的位置信息 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); } }粒子時鐘
渲染文字時鐘
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è)置每個像素的位置信息 y:i+Math.random()*20, //重新設(shè)置每個像素的位置信息 fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+','+(data[pos+3])+')' }; pixelsArr.push(pixel); } } } } imgData保存了所選區(qū)域內(nèi)的像素信息，每個像素點占據(jù)4位，保存了RGBA四位信息。篩選每個像素的第四位，這段代碼中將所有透明度不為0的像素都保存到了數(shù)組pixelsArr中。
x、y記載了該粒子的位置信息，為了產(chǎn)生效果圖中的運(yùn)動效果，給每個粒子添加了0-20個像素的偏移位置，每次重繪時，偏移位置隨機(jī)生成，產(chǎn)生運(yùn)動效果。
粒子重繪
獲取粒子之后，需要清除畫布中原有的文字，將獲取到的粒子重新繪制到畫布上去。
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ù)r，r取值為0-4中隨機(jī)的數(shù)字。最終生成的粒子大小隨機(jī)。
實時刷新
獲取粒子并成功重繪之后，需要頁面實時刷新時間。這里采用window.requestAnimationFrame(callback)方法。
function time() { ...... getpixels(); //獲取粒子 drawPixels(); // 重繪粒子 requestAnimationFrame(time); } window.requestAnimationFrame(callback) 方法告訴瀏覽器您希望執(zhí)行動畫并請求瀏覽器在下一次重繪之前調(diào)用指定的函數(shù)來更新動畫。該方法使用一個回調(diào)函數(shù)作為參數(shù)，這個回調(diào)函數(shù)會在瀏覽器重繪之前調(diào)用。
該方法不需要設(shè)置時間間隔，調(diào)用頻率采用系統(tǒng)時間間隔（1s）。
文檔解釋戳這里
效果
總結(jié)
本文主要通過兩種不同的方式實現(xiàn)了時鐘的動態(tài)效果，其中粒子時鐘具有更多的可操作性。在以后的canvas系列中會針對粒子系統(tǒng)實現(xiàn)更多的動態(tài)效果。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答
