设为首页 加入收藏

TOP

HTML5-炫丽的时钟效果Canvas绘图与动画基础练习(二)
2015-04-07 15:29:14 来源: 作者: 【大 中 小】 浏览:136次
Tags：HTML5- 炫丽 时钟 效果 Canvas 绘图 动画 基础 练习
? ? //---秒


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


? ? ? ? ? ?
首页 上一页 1 2 3 下一页 尾页 2/3/3
【大 中 小】【打印】 【繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部】
分享到: 
上一篇：Python的@符号 下一篇：Java开发熟手该当心的11个错误

评论

帐　　号: 密码: (新用户注册)
验 证 码:
表　　情:
内　　容: