canvas实现粒子时钟效果


Posted in Javascript onFebruary 06, 2017

前面的话

本文将使用canvas实现粒子时钟效果

效果展示

点阵数字

digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵。每个数字的点阵表示是7*10大小的二维数组

通过遍历数字点阵的二维数组,当该位置的值为1时,则绘制一个粒子,否则不绘制

canvas实现粒子时钟效果

将绘制数字的函数命名为renderDigit()。在该函数中,将粒子绘制为一个小圆。小圆的半径为R,小圆所占据的矩形宽(高)为2(R+1)。由于数字点阵是10*7的二维数组,所以一个数字的宽度为14(R+1),高度为20(R+1)

假设数字的高度为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">当前浏览器不支持canvas,请更换浏览器后再试</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){
  //重置画布宽度,达到清空画布的效果
  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>
 

时钟实现

在上一步的点阵数字的基础上,实现一个粒子时钟。将时钟实现的函数命名为digitTime(),时钟实现由获取时间数据和渲染时钟两部分组成

【时间数据】

 最简单的时钟形式由两位的小时、两位的分钟和两位的秒钟组成,中间用冒号隔开。通过日期对象Date来获取当前时间,以及当前的小时、分钟和秒钟。但是,最终需要得到的是数字表示的时钟

 比如12:02:36的时间数据的表示形式为data[1,2,10,0,2,10,3,6]

【渲染时钟】

 获取到时间数据后,通过循环使用renderDigit()来渲染时钟中的每一个数字。此时,有一个需要改变的地方是arc()函数中的x坐标,否则它们将叠加在一起

 为了将时钟数字表示更加清晰在每个数字之间增加一定的间距。每个数字的宽度是14(R+1),假设data数组中7个数字的索引为index,则每个数字的起始X坐标可以等于14(R+2)*index

 最后通过定时器每间隔一段时间后更新时间

<canvas id="canvas" style="width:400px;">当前浏览器不支持canvas,请更换浏览器后再试</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(){
  /*获取时间数据*/
  var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
  //存储时间数字,由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
  var data = [];
  data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
  /*渲染时钟*/
  //重置画布宽度,达到清空画布的效果
  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>

随机抛物线

这节的随机抛物线运动是下节粒子动画的预备节。以DOM节点的投掷碰壁为基础,利用canvas实现一个小球的随机抛物线运动

将小球的运动拆分为x轴和y轴运动。x轴做匀速运动,y轴先做向上的减速运动,再做向下的加速运动。当小球离开画布区域时,停止定时器

<button id="btn">按钮</button>
<canvas id="canvas" style="border:1px solid black">当前浏览器不支持canvas,请更换浏览器后再试</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轴坐标
  var x=Math.floor(Math.random() * 60 + 10);
  var y=Math.floor(Math.random() * 60 + 10);
  //声明x、y轴的步长值
  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>

粒子动画

下面来实现粒子动画。在时间数字变化的瞬间,由众多的粒子组成的新数字上重复生成相同的粒子,并且新生成的粒子做随机的抛物线运动

所以,第一步是先要判断是哪个或哪些数字在时间更新时发生了变化。然后,通过这些变化信息,生成要运动的小球。在定时器的运行间隔内,对运动小球的状态进行更新。最后,对时钟和运行的小球进行统一渲染

<canvas id="canvas" style="width:500px;">当前浏览器不支持canvas,请更换浏览器后再试</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;
 //存储时间数据
 var data = [];
 //存储运动的小球
 var balls = [];
 //设置粒子半径
 var R = canvas.height/20-1;
 (function(){
  var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
  //存储时间数字,由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
  data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]); 
 })();
 /*生成点阵数字*/
 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();
    }
   }
  }  
 }
 /*更新时钟*/
 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--){
   //时间发生变化 
   if(NewData[i] !== data[i]){
    //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
    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();
 }
 /*更新小球状态*/
 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--;
   }    
  }
 }
 /*增加要运动的小球*/
 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(){
  //重置画布宽度,达到清空画布的效果
  canvas.height = 100;
  //渲染时钟
  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(){
  //更新时钟
  updateDigitTime();
  //更新小球状态
  updateBalls();
  //渲染
  render();
 },50);
</script>

源码查看

公告栏扩展

将canvas粒子时钟js部分封装为canvasTime.js,在公告栏添加如下代码,即可以实现在公告栏插入时钟的效果

<canvas id="canvas" style="width:100%;">当前浏览器不支持canvas,请更换浏览器后再试</canvas>
<script src="http://files.cnblogs.com/files/xiaohuochai/canvasTime.js"></script>

canvas实现粒子时钟效果

canvas实现粒子时钟效果

好的代码像粥一样,都是用时间熬出来的

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
jquery实现聊天机器人
Feb 08 jQuery
javascript笔记之匿名函数和闭包
Feb 06 #Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 #Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 #Javascript
浅谈Javascript事件对象
Feb 05 #Javascript
js中创建对象的几种方式
Feb 05 #Javascript
js实现增加数字显示的环形进度条效果
Feb 05 #Javascript
JS实现复制内容到剪贴板功能
Feb 05 #Javascript
You might like
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
详解JS浏览器事件循环机制
2019/03/27 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python logging通过json文件配置的步骤
2020/04/27 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
Python try except else使用详解
2021/01/12 Python
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
早会主持词
2014/03/17 职场文书
《大海那边》教学反思
2014/04/09 职场文书
学生干部培训方案
2014/06/12 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
会议邀请函
2015/01/30 职场文书
市场督导岗位职责
2015/04/10 职场文书
Github 使用python对copilot做些简单使用测试
2022/04/14 Python