canvas實(shí)現(xiàn)粒子時(shí)鐘效果

2019-11-19 17:43:12

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

前面的話(huà)

本文將使用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){  //重置畫(huà)布寬度，達(dá)到清空畫(huà)布的效果  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)隔開(kāi)。通過(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í)鐘*/  //重置畫(huà)布寬度，達(dá)到清空畫(huà)布的效果  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ī)拋物線(xiàn)

這節(jié)的隨機(jī)拋物線(xiàn)運(yùn)動(dòng)是下節(jié)粒子動(dòng)畫(huà)的預(yù)備節(jié)。以DOM節(jié)點(diǎn)的投擲碰壁為基礎(chǔ)，利用canvas實(shí)現(xiàn)一個(gè)小球的隨機(jī)拋物線(xiàn)運(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)小球離開(kāi)畫(huà)布區(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)畫(huà)

下面來(lái)實(shí)現(xiàn)粒子動(dòng)畫(huà)。在時(shí)間數(shù)字變化的瞬間，由眾多的粒子組成的新數(shù)字上重復(fù)生成相同的粒子，并且新生成的粒子做隨機(jī)的拋物線(xiàn)運(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(){  //重置畫(huà)布寬度，達(dá)到清空畫(huà)布的效果  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>