>炫酷的计时器效果Canvas绘图与动画<
>炫丽的计时器效果Canvas绘图与动画<
虽然我是学习java的，但是因为最近使用html5的关系，多学习了一下前端知识。
现在，我要介绍的计时器是十分炫酷的，使用画布完成。
喜欢html5和喜欢炫酷特效的同学可以收藏一下。
-----------------------------------------华丽的分割线----------------------------------------------------
首先，介绍一下文件的效果。
看起来是非常的炫酷的。
-----------------------------------------下面是代码部分，代码注释得很清楚了，就不多废话了----------------------------------------------------
index.html ->
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>炫丽的计时器效果-Canvas绘图与动画-</title> <script src="js/countdown.js"></script> <script src="js/digit.js"></script> </head> <body style="height:100%;width:100%;"> <canvas id="canvas" style="height:100%;width:100%;"></canvas> </body> </html>
countdown.js ->
var window_width = 1440;/*页面的宽度*/ var window_height = 900;/*页面的高度*/ var radius = 8;/*小球的半径*/ var margin_top = 60;/*元素的上外边距*/ var margin_left = 30;/*元素的左外边距*/ var curShowTimeSeconds = 0;/*获取当天的秒数*/ var balls = [];/*小球的集合*/ const colors = ["#33b5e5","#0099cc","#aa66cc","#9933cc","#99cc00","#669900","#ffbb33","#ff8800","#ff4444","#cc0000"];/*颜色集合*/ window.onload = function(){ /*判断是否支持canvas, * 初始化页面*/ window_width = document.body.clientWidth; window_height = document.body.clientHeight; margin_left = Math.round(window_width/10); radius = Math.round(window_width*4/5/108)-1; margin_top = Math.round(window_height/5); /*获取canvas对象*/ var canvas = document.getElementById("canvas"); /*判断浏览器是否支持Canvas*/ if(canvas.getContext("2d")){ var context = canvas.getContext("2d"); /*使用context绘制*/ }else{ alert("当前浏览器不支持Canvas，请更换浏览器后再试"); } canvas.width = window_width; canvas.height = window_height; curShowTimeSeconds = getCurrentShowTimeSeconds(); setInterval(function(){ render(context); update(); },50); } function getCurrentShowTimeSeconds(){ /*获取当天的秒数*/ var curTime = new Date(); var ret = curTime.getHours()*3600 + curTime.getMinutes()*60 + curTime.getSeconds(); return ret; } function update(){ /*负责数据的改变*/ var nextShowTimeSeconds = getCurrentShowTimeSeconds(); 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(nextSeconds%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 count = 0; for(var i=0;i<balls.length;i++){ if(balls[i].x+radius>0 && balls[i].x - radius < window_width){ balls[count++] = balls[i]; } } while(balls.length>Math.min(300,count)){ 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, //取-1或者1 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/3600); var minutes = parseInt((curShowTimeSeconds-hours*3600)/60); var seconds = 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 = "rgb(0,102,153)"; 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(); } } } }
digit.js ->
/*绘图的坐标*/ digit = [ [ [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] ]/*:*/ ];
------------------------------如果大家喜欢，请加关注，谢谢------------------------------------
