[实例]canvas之炫彩时钟
来源：互联网 发布：软件安全性测试文档 编辑：程序博客网 时间：2024/04/19 17:31
home.html<html><head> <script src="jquery.min.js"></script> <script src="digit.js"></script> <script src="countdown.js"></script></head><body style="height: 100%"> <div style="background: url(countdown_background_vn.jpg);background-size:cover;"> <canvas id="canvas"></canvas> </div></body></html>
digit.jsdigit = [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,0,1,1,0], [0,0,1,1,1,0,0] ],//0 [ [0,0,0,1,1,0,0], [0,1,1,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [1,1,1,1,1,1,1] ],//1 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,0,0,1,1], [1,1,1,1,1,1,1] ],//2 [ [1,1,1,1,1,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,1,1,1,0,0], [0,0,0,0,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//3 [ [0,0,0,0,1,1,0], [0,0,0,1,1,1,0], [0,0,1,1,1,1,0], [0,1,1,0,1,1,0], [1,1,0,0,1,1,0], [1,1,1,1,1,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,1,1] ],//4 [ [1,1,1,1,1,1,1], [1,1,0,0,0,0,0], [1,1,0,0,0,0,0], [1,1,1,1,1,1,0], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//5 [ [0,0,0,0,1,1,0], [0,0,1,1,0,0,0], [0,1,1,0,0,0,0], [1,1,0,0,0,0,0], [1,1,0,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//6 [ [1,1,1,1,1,1,1], [1,1,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,0,0,1,1,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0], [0,0,1,1,0,0,0] ],//7 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,1,1,0] ],//8 [ [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [0,1,1,1,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,0,1,1], [0,0,0,0,1,1,0], [0,0,0,1,1,0,0], [0,1,1,0,0,0,0] ],//9 [ [0,0,0,0], [0,0,0,0], [0,1,1,0], [0,1,1,0], [0,0,0,0], [0,0,0,0], [0,1,1,0], [0,1,1,0], [0,0,0,0], [0,0,0,0] ]//: ]
countdown.jsvar WINDOW_WIDTH=1024;var WINDOW_HEIGHT=768;var RADIUS=8;var MARGIN_TOP=60;var MARGIN_LEFT=30;const endTime=new Date(2016,1,3,22,0,0);var curShowTimeSeconds=0;var balls=[];const colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00"];$(function(){ WINDOW_WIDTH=document.body.clientWidth; WINDOW_HEIGHT=document.body.clientHeight; MARGIN_LEFT=Math.round(WINDOW_WIDTH/22); RADIUS=Math.round(WINDOW_WIDTH*4/5/160)-1; MARGIN_TOP=Math.round(WINDOW_HEIGHT/5); var canvas=$("#canvas")[0]; var context=canvas.getContext("2d"); canvas.width=WINDOW_WIDTH; canvas.height=WINDOW_HEIGHT; curShowTimeSeconds=getCurShowTimeSeconds(); setInterval(function () { render(context) ; update(); },50); //render(context);})function getCurShowTimeSeconds(){ var curTime=new Date(); var ret=endTime.getTime()-curTime.getTime(); ret=Math.round(ret/1000); return ret>=0?ret:0;}function update(){ var nextShowTimeSeconds=getCurShowTimeSeconds(); var nextHours=parseInt(nextShowTimeSeconds/3600); var nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60); var nextSeconds=nextShowTimeSeconds%60; var curHours=parseInt(curShowTimeSeconds/3600); var curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60); var curSeconds=curShowTimeSeconds%60; if(nextSeconds!=curSeconds){ if(parseInt(curHours/10)!=parseInt(nextHours/10)){ addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours/10)); } if(parseInt(curHours%10)!=parseInt(nextHours%10)){ addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10)); } if(parseInt(curMinutes/10)!=parseInt(nextMinutes/10)){ addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10)); } if(parseInt(curMinutes%10)!=parseInt(nextMinutes%10)){ addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10)); } if(parseInt(curSeconds/10)!=parseInt(nextSeconds/10)){ addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10)); } if(parseInt(curSeconds%10)!=parseInt(nextSeconds%10)){ addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10)); } curShowTimeSeconds=nextShowTimeSeconds; } updateBalls();}function updateBalls(){ for(var i=0;i<balls.length;i++){ balls[i].x+=balls[i].vx; balls[i].y+=balls[i].vy; balls[i].vy+=balls[i].g; if(balls[i].y>=WINDOW_HEIGHT-RADIUS){ balls[i].y=WINDOW_HEIGHT-RADIUS; balls[i].vy=-balls[i].vy*0.75; } } var cnt=0; for(var i=0;i<balls.length;i++){ if(balls[i].x+RADIUS>0 && balls[i].x-RADIUS<WINDOW_WIDTH){ balls[cnt++]=balls[i]; } } while(balls.length>Math.min(300,cnt)){ balls.pop(); }}function addBalls(x,y,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){ var aBall={ x:x+j*2*(RADIUS+1)+(RADIUS+1), y:y+i*2*(RADIUS+1)+(RADIUS+1), g:1.5+Math.random(), vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4, vy:-5, color:colors[Math.floor(Math.random()*colors.length)] } balls.push(aBall); }}function render(cxt){ cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT); //刷新一个矩形区域 var hours=parseInt(curShowTimeSeconds/(60*60)); var minutes=parseInt((curShowTimeSeconds-hours*60*60)/60); var seconds=parseInt(curShowTimeSeconds%60); renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt); renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt); renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt); renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt); renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt); renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,cxt); renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt); renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt); for(var i=0;i<balls.length;i++){ cxt.fillStyle=balls[i].color; cxt.beginPath(); cxt.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true); cxt.closePath(); cxt.fill(); }}function renderDigit(x,y,num,cxt){ cxt.fillStyle="#76EE00"; 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(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI); cxt.closePath(); cxt.fill(); }} 0 0
- [实例]canvas之炫彩时钟
- html5学习canvas实例之时钟
- canvas-实例时钟
- html5之Canvas坐标变换应用-时钟实例
- Canvas之时钟
- Canvas学习之绘制时钟
- canvas 应用实例-我的时钟
- Canvas实例——绘制时钟
- 自定义View之canvas绘制时钟
- Android之Canvas自定义画一个时钟
- html5之canvas实现模拟简易时钟
- HTML5之Canvas时钟小程序
- Canvas时钟
- canvas时钟
- canvas时钟
- Canvas时钟
- Canvas 时钟
- Canvas时钟
- 一行代码不用敲，15分钟轻松搞定GIS开发，GISer福音，教你如何从下载到使用webappbuilder创建第一个应用程
- Android第三方支付--微信支付
- 神经网络-反向传播算法
- oracle共享池
- linux虚拟机中修改MAC
- [实例]canvas之炫彩时钟
- node.js 学习
- 翻翻git之---自定义邮件发送按钮SendButton(流程分析，实现思路可以学习下)
- C++实现大数据乘法
- Glide加载图片
- Spring+iBatis+JOTM实现JTA事务
- 【Maven由浅入深】6.maven的依赖特性
- CentOS7 64位系统安装配置hadoop2.7.2
- 点分治总结
