慕课网canvas倒计时时钟

效果:

慕课网canvas倒计时时钟_第1张图片

思路:

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

eg:

慕课网canvas倒计时时钟_第2张图片

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

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

  • hours
  • minutes
  • seconds

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

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

eg:

慕课网canvas倒计时时钟_第3张图片

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

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

你可能感兴趣的:(html5)