首页 / CANVAS / canvas实现粒子时钟效果

canvas实现粒子时钟效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了canvas实现粒子时钟效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8179字，纯文字阅读大概需要12分钟。

内容图文

前面的话

本文将使用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实现粒子时钟效果全部内容，希望文章能够帮你解决canvas实现粒子时钟效果所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/346408.html

来源：【匿名】

【上一篇】canvas知识总结【下一篇】基于canvasJS在PHP中制作动态图表详解

更多 ►

【canvas实现粒子时钟效果】教程文章相关的互联网学习教程文章

【效果】使用canvas rotate实现一个旋转的矩形【代码】

使用canvas rotate实现一个旋转的矩形，并且以矩形的中心为原点，围绕原点旋转：<canvas id="canvas" width="800" height="400"></canvas><script type="text/javascript">var canvas = document.getElementById(‘canvas‘);var ctx = canvas.getContext(‘2d‘);ctx.translate(400,200);setInterval(function(){ctx.clearRect(-154,-104,canvas.width,canvas.height); // 清空矩形以及矩形的边框产生的效果 ctx.b...

canvas实现刮图效果【代码】【图】

<canvas id="myCanvas" width=300 height=300></canvas>JavaScript代码:var canvas = document.getElementById(‘myCanvas‘),ctx = canvas.getContext(‘2d‘),w = canvas.width,h = canvas.height,area = w * h,flag=false,l = canvas.offsetLeft;t = canvas.offsetTop,ctx.fillStyle = "#ccc";//覆盖第一层(添加灰色涂层)ctx.fillRect(0, 0, w, h);//添加背景即为要刮开的图像canvas.style.backgroundImage = ‘url(banner.jpg...

canvas实现的粒子效果【图】

前言：我的这个share很简单，没什么技术水准，主要是我自己觉得canvas这个标签很cool！，简单实用又能装X,而且又能实现很多看起来很炫的东西。一关于canvas<canvas>是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素.<canvas> 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard，后来又在Safari和Google Chrome被实现。基于Gecko 1.8的浏览器,比如 Firefox 1.5，同样支持这个元素。<canvas> 元素是WhatWG Web ...

canvas 3D运动球效果多球【代码】

<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>canvas</title><style type="text/css">#canvas{background-color: #eeeeee;}</style> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript">window.o...

经典！HTML5 Canvas 模拟可撕裂布料效果【图】

这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示，效果逼真。你会看到，借助 Canvas 的强大绘图和动画功能，只需很少的代码就能实现让您屏息凝神的效果。温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。源码下载效果演示您可能感兴趣的相关文章Web 开发中很实用的10个效果【源码下载】精心挑选的优秀jQuery Ajax分页插件和教程12个让人惊叹的的创意的 404 错误页面设计让网...

canvas学习资料及刮刮卡效果

canvas学习资料：http://www.w3school.com.cn/tags/html_ref_canvas.asphttp://www.w3school.com.cn/html5/html_5_canvas.asphttps://developer.mozilla.org/zh-CN/docs/Canvas_tutorialhttp://javascript.ruanyifeng.com/htmlapi/canvas.html让IE8及以下支持canvas方法（以vml替代，不支持getImageData()）https://code.google.com/p/explorercanvas/downloads/list刮刮卡效果：http://www.blackglory.me/the-html5-canvas-scrapi...

HTML5在canvas中绘制复杂形状附效果截图

一、绘制复杂形状或路径在简单的矩形不能满足需求的情况下，绘图环境提供了如下方法来绘制复杂的形状或路径。 beginPath() ：开始绘制一个新路径。 closePath() ：通过绘制一条当前点到路径起点的线段来闭合形状。 fill() ， stroke() ：填充形状或绘制空心形状。 moveTo() ：将当前点移动到点(x,y)。 lineTo() ：从当前点绘制一条直线到点(x,y)。 arc(x,y,r,sAngle,eAngle,counterclockwise) ：绘制一条指定半径的弧到点(x...

炫丽的倒计时效果Canvas绘图与动画基础【代码】

digit.js 1 digit = [2 [3//0 4 [0, 0, 1, 1, 1, 0, 0],5 [0, 1, 1, 0, 1, 1, 0],6 [1, 1, 0, 0, 0, 1, 1],7 [1, 1, 0, 0, 0, 1, 1],8 [1, 1, 0, 0, 0, 1, 1],9 [1, 1, 0, 0, 0, 1, 1],10 [1, 1, 0, 0, 0, 1, 1],11 [1, 1, 0, 0, 0, 1, 1],12 [0, 1, 1, 0, 1, 1, 0],13 [0, 0, 1, 1, 1, 0, 0]14 ],15 16 [17//1 18 ...

利用canvas制作波浪效果【代码】

不知道为什么，连发个帖子都习惯性的要按N次 Ctrl + s!!!!!废话不多说，直接上代码。/*****************************我是华丽的分割线*************************************/canvas.js： 1function curve(name, num, height, heaved, hz, reveal, start) { //id名和曲线数量,端点高低,起伏差,起伏频率,填充色 2 3this.name = name;4if((num & 1) != 0) num--;5this.num = num;6this.height = height;7this.heaved = heaved;8th...

jQuery和canvas实现的球体平抛及颜色动态变换效果【图】

这篇文章主要介绍了jQuery+canvas实现的球体平抛及颜色动态变换效果,通过jQuery结合html5的canvas技术调用时间函数实时进行数学运算,最终实现球体平抛及颜色动态变换的效果,需要的朋友可以参考下本文实例讲述了jQuery+canvas实现的球体平抛及颜色动态变换效果。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT...

分享HTML5Canvas画印章效果实例代码

$velocityCount 下面分享一个用HTML5 Canvas画印章效果实例代码，可以看一下<!DOCTYPE html> <html> <head><meta charset="gbk"><title>HTML5 Canvas画印章</title> </head> <body><canvas id="canvas" width="200" height="200"></canvas> <script>var canvas = document.getElementById("canvas"); var context = canvas.getContext(2d);var text = "XXX专用章";var companyName = "浙江网络科技股份有限公司";// 绘制印章边框...

canvas实现动态小球重叠效果

前面的话在javascript运动系列中，详细介绍了各种运动，其中就包括碰壁运动。但是，如果用canvas去实现，却是另一种思路。本文将详细介绍canvas动态小球重叠效果静态小球首先，生成随机半径、随机位置的50个静态小球 <button id="btn">按钮</button> <canvas id="canvas" width="500" height="300" style="border:1px solid black">当前浏览器不支持canvas，请更换浏览器后再试</canvas> <script> var canvas = document.getEle...

JavaScript+html5canvas绘制小人的效果介绍【图】

这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下本文实例讲述了JavaScript+html5 canvas绘制的小人效果。分享给大家供大家参考，具体如下：运行效果截图如下：index.html代码如下：<!DOCTYPE html> <html><head><meta http-equiv="Content-type" content="text/html;charset=UTF-8" /><title>canvas中的缩放</title><style type="text...

使用javascript和HTML5Canvas画的四渐变色播放按钮效果【图】

这篇文章主要介绍了使用javascript和HTML5 Canvas画的四渐变色播放按钮效果,需要的朋友可以参考下<canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图，本文使用canvas标签和Javascript配合画出了一个四色渐变的播放按钮效果，效果图：实现代码：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk...

js+canvas在线图片预览压缩上传效果【图】

这次给大家带来js+canvas在线图片预览压缩上传效果，实现js+canvas在线图片预览压缩上传效果的注意事项有哪些，下面就是实战案例，一起来看一下。先来一张效果图，压压惊第一步：用户选择需要上传的图片<input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()">在选定了图片后 upload 函数将被触发，我们需要在这个函数中，获取到图片的资源，将它压缩并利用canvas绘制出来，若需要上传到服务器，...

CANVAS - 相关标签

canvas动画

CANVAS - 最热教程

javascript – 如何通过z-index对这些c...微信小程序利用Canvas绘制图片和竖排文...微信小程序使用CANVAS绘制图片及图片圆...Canvas跨域的解决方案介绍 javascript – 使用图像创建Canvas元素...Python3 tkinter基础 Canvas create_po...HTML5 Canvas核心技术—图形、动画与游...微信小程序简单的canvas裁剪图片功能详...Vue中使用canvas方法总结关于HTML5Canvas的事件处理

首页 / CANVAS / canvas实现粒子时钟效果

canvas实现粒子时钟效果

内容导读

内容图文

内容总结

内容备注

内容手机端

【canvas实现粒子时钟效果】教程文章相关的互联网学习教程文章

CANVAS - 相关标签

CANVAS - 最新教程

CANVAS - 最热教程