HTML5-炫丽的时钟效果Canvas绘图与动画基础练习(一)

HTML5-炫丽的时钟效果Canvas绘图与动画基础练习

全部代码：

var r=8;//圆半径

? ? window.onload=function(){

? ? var canvas=document.getElementById("canvas");

? ? var context=canvas.getContext("2d");

? ? canvas.width=WINDOW_WIDTH;

? ? canvas.height=WINDOW_HEIGHT;

?

? ? window.setInterval(function(){

? ? ? var curr=new Date();

? ? ? var curHours=curr.getHours();

? ? ? var curMinutes=curr.getMinutes();

? ? ? var curSeconds=curr.getSeconds();

? ? ?

? ? ? //当时间的秒数改变时添加彩色小球

? ? ? if(preSeconds!=curSeconds)

? ? ? {

? ? ? ?

? ? ? ? if(parseInt(curHours/10)!=parseInt(preHours/10)){

? ? ? ? addBall(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10));? ? ?

? ? ? ? }

? ? ? ? ? if(parseInt(curHours%10)!=parseInt(preHours%10)){

? ? ? ? addBall(MARGIN_LEFT+15*(r+1),MARGIN_TOP,parseInt(curHours%10));? ?

? ? ? ? }

? ? ? ? if(parseInt(curMinutes/10)!=parseInt(preMinutes/10)){

? ? ? ? addBall(MARGIN_LEFT+39*(r+1),MARGIN_TOP,parseInt(curMinutes/10));? ? ?

? ? ? ? }

? ? ? ? ? if(parseInt(curMinutes%10)!=parseInt(preMinutes%10)){

? ? ? ? addBall(MARGIN_LEFT+54*(r+1),MARGIN_TOP,parseInt(curMinutes%10));? ? ?

? ? ? ? }

?

? ? ? ? if(parseInt(curSeconds/10)!=parseInt(preSeconds/10)){

? ? ? ? addBall(MARGIN_LEFT+78*(r+1),MARGIN_TOP,parseInt(curSeconds/10));? ? ?

? ? ? ? }

? ? ? ? ? if(parseInt(curSeconds%10)!=parseInt(preSeconds%10)){

? ? ? ? addBall(MARGIN_LEFT+93*(r+1),MARGIN_TOP,parseInt(curSeconds%10));? ? ?

? ? ? ? }? ? ?

? ? ? }

? ? ? render(context);

? ? ?

? ? ? ? },50);

? ?

? ? }

?

? ? //添加小球(数字num上的彩色小球，x，y:数字方块容器的左上角顶点坐标)

? ? function addBall(x,y,num){

? ? ? ? for (var i=0;i

? ? ? ? {

? ? ? ? ? ? for (var j=0;j

? ? ? ? ? ? {

? ? ? ? ? ? ? ? if(digit[num][i][j]==1){

? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? var ball={

? ? ? ? ? ? ? ? ? ? x:x+j*2*(r+1)+r+1,

? ? ? ? ? ? ? ? ? ? y:y+i*2*(r+1)+r+1,? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? g:1.5+Math.random(),

? ? ? ? ? ? ? ? ? ? vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,//结果为-4/4

? ? ? ? ? ? ? ? ? ? vy:-5,

? ? ? ? ? ? ? ? ? ? color:colors[Math.floor(Math.random()*colors.length)]

? ? ? ? ? ? ? ? ? ? };

? ? ? ? ? ? ? ? ? ? balls.push(ball);

?

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

? ? }

? //----画彩色小球

? function renderBalls(context){

? ? ? ? ? ? //context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)

? ? for (var i=0;i

? ? {

? ? ? ? context.beginPath();

? ? ? ? context.arc(balls[i].x,balls[i].y,r,0,2*Math.PI,false);

? ? ? ? context.fillStyle=balls[i].color;

? ? ? ? context.fill();

? ? ? ? context.closePath();

? ? }

? }

?

?//----更新彩色小球位置

? function UpdateBalls(){

? for (var i=0;i

? ? {

? ? balls[i].x+=balls[i].vx;

? ? balls[i].y+=balls[i].vy;

? ? balls[i].vy+=balls[i].g;

? ? if(balls[i].y+r>=WINDOW_HEIGHT){

? ? balls[i].y=WINDOW_HEIGHT-r;

? ? balls[i].vy=-balls[i].vy*0.6;

? ? }

? ? }

? }

?

?

? ? var preHours;

? ? var preMinutes;

? ? var preSeconds;

?

? ? //渲染整个画布

? ? function render(context)

? ? {

? ? ? ? context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)

? ? ? ? var now=new Date();

? ? ? ? var hours=now.getHours();

? ? ? ? var minutes=now.getMinutes();

? ? ? ? var seconds=now.getSeconds();

? ? ? ? preHours=hours;

? ? ? ? preMinutes=minutes;

? ? ? ? preSeconds=seconds;

? ? ? ? //---时

? ? ? ? renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),context);

? ? ? ? renderDigit(MARGIN_LEFT+15*(r+1),MARGIN_TOP,hours%10,context);

? ? ? ? renderDigit(MARGIN_LEFT+30*(r+1),MARGIN_TOP,10,context);

? ? ? ? //---分

? ? ? ? renderDigit(MARGIN_LEFT+39*(r+1),MARGIN_TOP,parseInt(minutes/10),context);

? ? ? ? renderDigit(MARGIN_LEFT+54*(r+1),MARGIN_TOP,minutes%10,context);

? ? ? ? renderDigit(MARGIN_LEFT+69*(r+1),MARGIN_TOP,10,context);

? ?