canvas實(shí)現(xiàn)粒子時(shí)鐘效果
前面的話
本文將使用canvas實(shí)現(xiàn)粒子時(shí)鐘效果
效果展示
點(diǎn)陣數(shù)字
digit.js是一個(gè)三維數(shù)組,包含的是0到9以及冒號(hào)(digit[10])的二維點(diǎn)陣。每個(gè)數(shù)字的點(diǎn)陣表示是7*10大小的二維數(shù)組
通過(guò)遍歷數(shù)字點(diǎn)陣的二維數(shù)組,當(dāng)該位置的值為1時(shí),則繪制一個(gè)粒子,否則不繪制
將繪制數(shù)字的函數(shù)命名為renderDigit()。在該函數(shù)中,將粒子繪制為一個(gè)小圓。小圓的半徑為R,小圓所占據(jù)的矩形寬(高)為2(R+1)。由于數(shù)字點(diǎn)陣是10*7的二維數(shù)組,所以一個(gè)數(shù)字的寬度為14(R+1),高度為20(R+1)
假設(shè)數(shù)字的高度為100px,則小圓的半徑R=4
<div id="test"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button> <button>9</button> <button>10</button> </div> <canvas id="canvas">當(dāng)前瀏覽器不支持canvas,請(qǐng)更換瀏覽器后再試</canvas> <script src="http://files.cnblogs.com/files/xiaohuochai/digit.js"></script> <script>var canvas = document.getElementById('canvas'); if(canvas.getContext){ var cxt = canvas.getContext('2d'); } function renderDigit(num){ //重置畫布寬度,達(dá)到清空畫布的效果 canvas.height = 100; var R = canvas.height/20-1; for(var i = 0; i < digit[num].length; i++){ for(var j = 0; j < digit[num][i].length; j++){ if(digit[num][i][j] == 1){ cxt.beginPath(); cxt.arc(j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI); cxt.closePath(); cxt.fill(); } } } } var test = document.getElementById('test'); test.onclick = function(e){ e = e || event; var target = e.target || e.srcElement; if(!isNaN(target.innerHTML)){ renderDigit(target.innerHTML); } } </script>
時(shí)鐘實(shí)現(xiàn)
在上一步的點(diǎn)陣數(shù)字的基礎(chǔ)上,實(shí)現(xiàn)一個(gè)粒子時(shí)鐘。將時(shí)鐘實(shí)現(xiàn)的函數(shù)命名為digitTime(),時(shí)鐘實(shí)現(xiàn)由獲取時(shí)間數(shù)據(jù)和渲染時(shí)鐘兩部分組成
【時(shí)間數(shù)據(jù)】
最簡(jiǎn)單的時(shí)鐘形式由兩位的小時(shí)、兩位的分鐘和兩位的秒鐘組成,中間用冒號(hào)隔開。通過(guò)日期對(duì)象Date來(lái)獲取當(dāng)前時(shí)間,以及當(dāng)前的小時(shí)、分鐘和秒鐘。但是,最終需要得到的是數(shù)字表示的時(shí)鐘
比如12:02:36的時(shí)間數(shù)據(jù)的表示形式為data[1,2,10,0,2,10,3,6]
【渲染時(shí)鐘】
獲取到時(shí)間數(shù)據(jù)后,通過(guò)循環(huán)使用renderDigit()來(lái)渲染時(shí)鐘中的每一個(gè)數(shù)字。此時(shí),有一個(gè)需要改變的地方是arc()函數(shù)中的x坐標(biāo),否則它們將疊加在一起
為了將時(shí)鐘數(shù)字表示更加清晰在每個(gè)數(shù)字之間增加一定的間距。每個(gè)數(shù)字的寬度是14(R+1),假設(shè)data數(shù)組中7個(gè)數(shù)字的索引為index,則每個(gè)數(shù)字的起始X坐標(biāo)可以等于14(R+2)*index
最后通過(guò)定時(shí)器每間隔一段時(shí)間后更新時(shí)間
<canvas id="canvas" style="width:400px;">當(dāng)前瀏覽器不支持canvas,請(qǐng)更換瀏覽器后再試</canvas> <script src="http://files.cnblogs.com/files/xiaohuochai/digit.js"></script> <script> var canvas = document.getElementById('canvas'); if(canvas.getContext){ var cxt = canvas.getContext('2d'); } canvas.height = 100; canvas.width = 700; function renderDigit(index,num){ var R = canvas.height/20-1; for(var i = 0; i < digit[num].length; i++){ for(var j = 0; j < digit[num][i].length; j++){ if(digit[num][i][j] == 1){ cxt.beginPath(); cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI); cxt.closePath(); cxt.fill(); } } } } function digitTime(){ /*獲取時(shí)間數(shù)據(jù)*/ var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date()); //存儲(chǔ)時(shí)間數(shù)字,由十位小時(shí)、個(gè)位小時(shí)、冒號(hào)、十位分鐘、個(gè)位分鐘、冒號(hào)、十位秒鐘、個(gè)位秒鐘這7個(gè)數(shù)字組成 var data = []; data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]); /*渲染時(shí)鐘*/ //重置畫布寬度,達(dá)到清空畫布的效果 canvas.height = 100; for(var i = 0; i < data.length; i++){ renderDigit(i,data[i]); } } digitTime(); clearInterval(oTimer); var oTimer = setInterval(function(){ digitTime(); },500); </script>
隨機(jī)拋物線
這節(jié)的隨機(jī)拋物線運(yùn)動(dòng)是下節(jié)粒子動(dòng)畫的預(yù)備節(jié)。以DOM節(jié)點(diǎn)的投擲碰壁為基礎(chǔ),利用canvas實(shí)現(xiàn)一個(gè)小球的隨機(jī)拋物線運(yùn)動(dòng)
將小球的運(yùn)動(dòng)拆分為x軸和y軸運(yùn)動(dòng)。x軸做勻速運(yùn)動(dòng),y軸先做向上的減速運(yùn)動(dòng),再做向下的加速運(yùn)動(dòng)。當(dāng)小球離開畫布區(qū)域時(shí),停止定時(shí)器
<button id="btn">按鈕</button> <canvas id="canvas" style="border:1px solid black">當(dāng)前瀏覽器不支持canvas,請(qǐng)更換瀏覽器后再試</canvas> <script> var canvas = document.getElementById('canvas'); if(canvas.getContext){ var cxt = canvas.getContext('2d'); } //聲明canvas的寬高 var H = 100,W = 200; canvas.height = H; canvas.width = W; var R = canvas.height/20-1; var numArray = [1,2,3,4]; var colorArray = ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"]; btn.onclick = function(){ //聲明x、y軸坐標(biāo) var x=Math.floor(Math.random() * 60 + 10); var y=Math.floor(Math.random() * 60 + 10); //聲明x、y軸的步長(zhǎng)值 var stepY = -3*numArray[Math.floor(Math.random()*numArray.length)]; var stepX = Math.floor(Math.random() * 10 -5); //聲明y軸變化值 var disY = numArray[Math.floor(Math.random()*numArray.length)]; var color =colorArray[Math.floor(Math.random()*colorArray.length)]; clearInterval(oTimer); var oTimer = setInterval(function(){ stepY += disY; x += stepX; y += stepY; canvas.height = 100; cxt.beginPath(); cxt.arc(x,y,R,0,2*Math.PI); cxt.fillStyle = color; cxt.closePath(); cxt.fill(); if(x > W + R || y > H + R){ clearInterval(oTimer); } },50); } </script>
粒子動(dòng)畫
下面來(lái)實(shí)現(xiàn)粒子動(dòng)畫。在時(shí)間數(shù)字變化的瞬間,由眾多的粒子組成的新數(shù)字上重復(fù)生成相同的粒子,并且新生成的粒子做隨機(jī)的拋物線運(yùn)動(dòng)
所以,第一步是先要判斷是哪個(gè)或哪些數(shù)字在時(shí)間更新時(shí)發(fā)生了變化。然后,通過(guò)這些變化信息,生成要運(yùn)動(dòng)的小球。在定時(shí)器的運(yùn)行間隔內(nèi),對(duì)運(yùn)動(dòng)小球的狀態(tài)進(jìn)行更新。最后,對(duì)時(shí)鐘和運(yùn)行的小球進(jìn)行統(tǒng)一渲染
<canvas id="canvas" style="width:500px;">當(dāng)前瀏覽器不支持canvas,請(qǐng)更換瀏覽器后再試</canvas> <script src="http://files.cnblogs.com/files/xiaohuochai/digit.js"></script> <script> var canvas = document.getElementById('canvas'); if(canvas.getContext){ var cxt = canvas.getContext('2d'); } //聲明canvas的寬高 var H = 100,W = 700; canvas.height = H; canvas.width = W; //存儲(chǔ)時(shí)間數(shù)據(jù) var data = []; //存儲(chǔ)運(yùn)動(dòng)的小球 var balls = []; //設(shè)置粒子半徑 var R = canvas.height/20-1; (function(){ var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date()); //存儲(chǔ)時(shí)間數(shù)字,由十位小時(shí)、個(gè)位小時(shí)、冒號(hào)、十位分鐘、個(gè)位分鐘、冒號(hào)、十位秒鐘、個(gè)位秒鐘這7個(gè)數(shù)字組成 data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]); })(); /*生成點(diǎn)陣數(shù)字*/ function renderDigit(index,num){ for(var i = 0; i < digit[num].length; i++){ for(var j = 0; j < digit[num][i].length; j++){ if(digit[num][i][j] == 1){ cxt.beginPath(); cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI); cxt.closePath(); cxt.fill(); } } } } /*更新時(shí)鐘*/ function updateDigitTime(){ var changeNumArray = []; var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date()); var NewData = []; NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]); for(var i = data.length-1; i >=0 ; i--){ //時(shí)間發(fā)生變化 if(NewData[i] !== data[i]){ //將變化的數(shù)字值和在data數(shù)組中的索引存儲(chǔ)在changeNumArray數(shù)組中 changeNumArray.push(i+'_'+(Number(data[i])+1)%10); } } //增加小球 for(var i = 0; i< changeNumArray.length; i++){ addBalls.apply(this,changeNumArray[i].split('_')); } data = NewData.concat(); } /*更新小球狀態(tài)*/ function updateBalls(){ for(var i = 0; i < balls.length; i++){ balls[i].stepY += balls[i].disY; balls[i].x += balls[i].stepX; balls[i].y += balls[i].stepY; if(balls[i].x > W + R || balls[i].y > H + R){ balls.splice(i,1); i--; } } } /*增加要運(yùn)動(dòng)的小球*/ function addBalls(index,num){ var numArray = [1,2,3]; var colorArray = ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"]; for(var i = 0; i < digit[num].length; i++){ for(var j = 0; j < digit[num][i].length; j++){ if(digit[num][i][j] == 1){ var ball = { x:14*(R+2)*index + j*2*(R+1)+(R+1), y:i*2*(R+1)+(R+1), stepX:Math.floor(Math.random() * 4 -2), stepY:-2*numArray[Math.floor(Math.random()*numArray.length)], color:colorArray[Math.floor(Math.random()*colorArray.length)], disY:1 }; balls.push(ball); } } } } /*渲染*/ function render(){ //重置畫布寬度,達(dá)到清空畫布的效果 canvas.height = 100; //渲染時(shí)鐘 for(var i = 0; i < data.length; i++){ renderDigit(i,data[i]); } //渲染小球 for(var i = 0; i < balls.length; i++){ cxt.beginPath(); cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI); cxt.fillStyle = balls[i].color; cxt.closePath(); cxt.fill(); } } clearInterval(oTimer); var oTimer = setInterval(function(){ //更新時(shí)鐘 updateDigitTime(); //更新小球狀態(tài) updateBalls(); //渲染 render(); },50); </script>
公告欄擴(kuò)展
將canvas粒子時(shí)鐘js部分封裝為canvasTime.js,在公告欄添加如下代碼,即可以實(shí)現(xiàn)在公告欄插入時(shí)鐘的效果
<canvas id="canvas" style="width:100%;">當(dāng)前瀏覽器不支持canvas,請(qǐng)更換瀏覽器后再試</canvas> <script src="http://files.cnblogs.com/files/xiaohuochai/canvasTime.js"></script>
好的代碼像粥一樣,都是用時(shí)間熬出來(lái)的
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
javascript禁制后退鍵(Backspace)實(shí)例代碼
這篇文章介紹了javascript禁制后退鍵(Backspace)實(shí)例代碼,有需要的朋友可以參考一下2013-11-11基于JS實(shí)現(xiàn)textarea中獲取動(dòng)態(tài)剩余字?jǐn)?shù)的方法
這篇文章主要介紹了基于JS實(shí)現(xiàn)textarea中獲取動(dòng)態(tài)剩余字?jǐn)?shù)的方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-05-05JavaScript+Html5實(shí)現(xiàn)按鈕復(fù)制文字到剪切板功能(手機(jī)網(wǎng)頁(yè)兼容)
在學(xué)習(xí)javascript的過(guò)程中,遇到一個(gè)問(wèn)題就是基于JavaScript+Html5實(shí)現(xiàn)按鈕復(fù)制文字到剪切板功能,下面小編給大家分享下我的實(shí)現(xiàn)思路,感興趣的朋友可以參考下2017-03-03網(wǎng)絡(luò)圖片延遲加載實(shí)現(xiàn)代碼 超越j(luò)query控件
原理是分段加載圖片,主要用于大型網(wǎng)站節(jié)省帶寬,可是他們提供的東西壓縮混淆看不清,還有的要基于什么雅虎的什么庫(kù),總之是很麻煩的,JQ的控件倒是夠清晰了,只是還是沒(méi)有達(dá)到節(jié)省網(wǎng)絡(luò)帶寬的效果2010-03-03JavaScript無(wú)提示關(guān)閉窗口(兼容IE/Firefox/Chrome)
JavaScript無(wú)提示關(guān)閉當(dāng)前頁(yè)面窗口,兼容IE/Firefox/Chrome (Close the current page window without confirm by JavaScript, support all browsers)2008-11-11關(guān)于元素的尺寸(dimensions) 說(shuō)明
在使用JavaScript腳本獲取元素的尺寸時(shí),有幾個(gè)屬性你需要弄清楚,不然會(huì)很棘手。2011-09-09JavaScript+html5 canvas繪制漸變區(qū)域完整實(shí)例
這篇文章主要介紹了JavaScript+html5 canvas繪制漸變區(qū)域的方法,結(jié)合完整實(shí)例形式分析了canvas顏色調(diào)用與圖形繪制的相關(guān)技巧,需要的朋友可以參考下2016-01-01