慕课网canvas倒计时时钟

效果：

思路：

1.数字——都是由原点形成，乍一看这些圆点的排布没有规律，但是仔细观察会发现这些圆点要么在一条横线上，要么在一条竖线上。所以可以用一个点阵来表示，1表示实心圆，0表示空白。

eg:

所以需要建一个文件，单独存放数字0-9的矩阵A10*7，当然还有冒号A10*4。

2.绘制——绘制的时候需要知道具体的时分秒，所以要定义相关的变量

• hours
• minutes
• seconds

然后绘制时分秒的每一个数字。

3.绘制一个数字——要计算arc里面的参数，x,y是起始位置

eg:

在做游戏或动画相关的时候都免不了使用格子系统，都需要计算位置。

4.既然是倒计时，肯定得有一个开始时间和结束时间，开始时间就从当前开始，结束时间这里给了一个固定的时间，注意，因为这里的时位置只给了两位数，所以倒计时也顶多只能倒计99小时以内的，如果想要天数更多甚至倒计年份，则可以相应地改变时位置的数字个数。

5.倒计时动画效果——setInterval(function(){},interval)，这个制作动画的效果不一定精确。

6.在canvas中产生动画的时候，由于每帧动画会产生一个叠加的效果，所以要对画布里的图像进行刷新操作：context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);

7.运动的小球——先绘制一个小球，然后在每间隔的时间让小球的位置发生改变，让小球产生运动的效果。为了产生自由落体的运动效果，可以设置一个加速度，想要有上抛到效果的话可以将小球垂直方向上的初始速度y为负值，接下来就是小球在碰到下边界后会反弹的效果，这就需要碰撞检测。当然还要模仿空气阻力。

8.性能优化

• balls数组在不断的增大。可以对滚出画布的小球进行删除，所以要判断小球的位置。这里使用了一点小技巧，就是用了一个cnt变量来将位于画布内的小球存储在balls数组的前cnt个，然后将其他的小球移出数组。由于这里位于画布里面的小球不会超过300，所以浏览器能带动，好像最多带动300多个，所以可以判断当cnt超过300时，就使用300作为判断条件。
• 屏幕自适应。画布的宽高根据屏幕来定，document.body.clientWidth