教你用html5 canvas写一个时钟详细解析教程源码(5)_H5之家

1 J; `/ @: C2 |. h: Y0 x

cxt.clearRect(0,0,500,500); //清除画布 , g: y$ X6 r8 T7 J

复制代码

这个是什么意思呢，实际上是2个坐标，0,0 和 500,500 对应整个画布；
5 h5 Q, w7 a, L* a那这样应该就万事大吉了吧，刷新，啧啧，总觉得哪里不对劲，对，好像出来的时候慢了点，要等一会才出来，你的是这样吗，是这样啊，是这样就对了，因为我们在他动之前让他把表画出来，所以执行setInterval（）函数时需要1秒之后才开始画，这就是为什么要等大概1秒针才出现的原因，解决方法，在setInterval（）前执行drawClock()函数；
/ I1 e/ b- D0 D S

$ m8 d6 O; K' f# i7 }2 I* g( f. b

drawClock();
9 M8 V" k3 B. N. @( x

' {- x$ ?# ?3 T- d8 G6 e& `

setInterval(drawClock,1000); $ t$ b0 T+ i. Z% U; j

复制代码

到这里，所有的问题就都解决了，你的时钟动了没，现在几点了！ % k2 ]; R& ^' ^. h' T
现在我把整个代码附在下面，供大家参考学习：
1 s' |4 u7 s; o! W( l canvas时钟详细解析.rar (1.41 KB, 下载次数: 0)

6 天前上传

点击文件名下载附件
教你用html5 canvas写一个时钟详细解析教程源码
下载积分: 威望 2 , 金钱 -1

2 a" f' A; e5 c
+ a3 Z' z5 z, s# h p: Q0 ]# a: R; K0 \
/ u. x4 b* K/ x9 ?