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

2015-04-07 15:29:14 · 作者: · 浏览: 152
? ? //---秒


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


? ? ? ? renderDigit(MARGIN_LEFT+93*(r+1),MARGIN_TOP,seconds%10,context);


? ? ? ? //---画小球


? ? ? ? renderBalls(context);


? ? ? ? //---改变小球路径


? ? ? ? UpdateBalls();


?


? ? }


? ? //渲染每个数字


? ? function renderDigit(x,y,num,context)


? ? {


? ? context.fillStyle="green";


? ? for (var i=0;i

? ? {


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

? ? ? ? {


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


? ? ? ? ? ? context.beginPath();


? ? ? ? ? ? context.arc(x+j*2*(r+1)+r+1,y+i*2*(r+1)+r+1,r,0,2*Math.PI,false);


? ? ? ? ? ? context.closePath();


? ? ? ? ? ? context.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],


? ? ? ? ? ?