渲染数字的时候，每个数字对应的是一个二维数组，如果对应地方为1，绘制圆圈，否则不绘制任何东西。十个二维数组表示十个数字，另外一个二位数组表示冒号。数字是10*7大小，冒号是10*4大小。
三个文件，index.html是网页文件，用来显示时钟的地方。digits.js是用来存放二维数字的地方。countdown是来处理逻辑的地方。如下所示：
点阵做字母也是类似的，做成ABCD就可以了。
定义全局的宽和高，onload函数中，得到canvas，获得绘图上下文环境，然后设置canvas宽高，开始绘图。这样绘制，屏幕大小改变起来非常方便，其次后续屏幕自适应，只需要计算window_width和window_height这两个值就好了。 暂时不处理绘制的逻辑过程，只处理绘制的过程。只调用render就可以了。
这里设置小时，分，秒，用来存放要绘制的具体数字。由于不涉及具体逻辑，这里先放置常量12，34，56。绘制一个数字的函数renderDigit，参数分别为位置，时针的第一位，绘图上下文环境。
看如何绘制一个数字，一定是一个二维循环，遍历相应点阵。点阵中每一个为1的地方，画一个实心小球，设置一个状态，给context的fillstyle设置一个颜色。之后就可以写二维循环了。对digit[num]遍历。并判断是1还是0，1的话，绘制圆球。
计算，每一个圈圈的位置。x，y代表起始位置。第i，j个圆的圆心为：x+2*（r+1）*j+（R+1）和y+2*i*（R+1）+（R+1），把对应的参数放到arc（）函数中
设置一个全局的margin_top和一个margin_left。代表第一个数组的开始位置。
第一个数字绘制结束后，依次改变不同数字的起始位置，并绘制相应的数字。其中参数10，是digits中的冒号。注意冒号和数字的宽不一样。
写死的时间，肯定是不行的。这里搞一个倒计时时间。写一个全局变量的截止时间，用const endTime = new Date(2017,12,13,18,47,52) 。因为我们在小时上用了两位来显示，所以最多也就是99小时，4天。程序设置时候一个小时。可以增加成三位，甚至增加天的设置。有了截止日期，如何获取距离截止日期有多少时间呢？getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。减去截止日期的毫秒数，就是得到中间值。
一个全局变量curShowTimeSeconds，onload函数中读取这个全局变量，并通过函数getCurrentShowTimeSeconds()函数获取当前需要显示时间。（倒计时剩余多少秒）
getCurrentShowTimeSeconds()定义如下：
如果剩余秒数大于等于0显示ret，否则显示0.
渲染的时候，将剩余秒数除以3600，得到剩余小时，类似可以得到分钟，秒钟。
动画的绘制：setInterval。做动画最简单的架构：第一个参数表示要做什么事情，第二个参数表示多长时间。
这里帧率是20。实际上并不准确，这里匿名函数不同，不一定能在50毫秒完成所有绘画内容。
绘制的匿名函数通常有两个部分，render()绘制当前页面，update()根据数据结构，进行调整。
动画主要包括两部分：时间在变，小球跳动。
先写函数update处理时间的变化。
获得当前时间（也就是nextShowTimeSeconds），对比之前（1s内）获取的显示时间（curShowTimeSeconds），然后做对比，秒数改变了，那么将curShowTimeSeconds改变。
需要注意一点，在canvas中逐帧动画，每一帧需要将改变的对象刷新，否则之前的对象和新的对象会叠加在一起。为此，我们介绍一个新的函数，
clearRect 会对函数进行刷新。
做一个小实验，怎么做小球运动效果：
先尝试一个小球，这里ball的参数，位置，半径，加速度，水平和竖直的速度。改变相应的参数，就可以改变对应的效果，比如vy为10，可以上抛。
真正实现运动学效果的在于下面：
对位置的一个改变。
假设画面底部一个地板，会反弹。就是碰撞检测。
也可以对上下左右边缘的碰撞检测。
小球越跳越高，要反弹的速度损耗一些。
小球的出现有一个规律，就是出现原来的数字形状的小球，之后小球掉落下来。对这些小球运动之前首先是要生成这些小球，首先要存储生成的小球，声明一个数组balls，新的小球添加进去。存储十种颜色，
生成小球的代码应该放在update中，render只是负责绘制。生成小球是一个数据的改变。一旦时间发生改变，就根据时间的改变生成小球，所以放在
具体生成过程，要判断哪些数字发生改变，所以依次对六个数字进行判断。
以小时的十位为例子，判断是不是改变了，如果改变了，增加小球，addBalls的参数是具体的位置是，和改变的数字。
类似的，对小球的个位数也要做这样一种操作。同理对时间的分钟和秒钟也要做这样的操作。
问题的关键是addBalls()怎么实现。这个函数和renderDigits()函数很像。renderDigits()是对（x,y）位置的小球点阵化一个渲染，而addBalls()对（x，y）位置加一个小球。所以也是二重循环。第一层循环是对digit[num].length的一个循环，二重循环是对digit[num][i].length的一个循环。
上面是位置信息，之后是运动相关的信息，首先设计加速度，
g：重力加速度是1.5加上一个随机数
vx：pow（-1，x）-1的x次方的意思。
vy：向上抛的初始速度-5。
updateBalls()对小球更新状态。
小球的运动如上，另外加上碰撞检测。
绘制小球
网友评论