动画 

更加精确的动画 

对比秒数，秒数不同则更新

每次更新图像是要刷新，否则新旧两个图像重叠。引入新函数clearRect()。

50毫秒，一秒为1000毫秒，帧率20，但不准，因为匿名函数内render()和update()不一定能在50秒内绘制完一次。

每帧两件事：一绘制画面，二根据绘制画面所需要的数据结构对数据结构进行调整。

使用setInterval构建逐帧动画

clearRect对矩形进行刷新操作

在render中绘制，在update中更新

setInterval函数表示定时执行某个函数

canvas中进行逐帧动画时，为避免图像的叠加，用context.clearRect(起点X，起点Y，终点X，终点Y)；方法对矩形空间内的图像进行刷新

因为，秒是一直变的，所以，只需要比较秒的变化就可以，判断是否改变当前curshowseconds对象，从而在render(),里改变时分秒。

过去时刻的时间和目前的时间进行比较。

我想做个运动垂直直线，两个lineTo总是同时运动，有什么办法能先让水平的运动在让垂直的运动

cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);刷新canvas画布

制作动画的架构：

setInterval{

    function(){//每帧要做什么事情

        render();//绘制当前的画面

        update();//调整绘制画面需要的数据结构

    ],

    50//每隔多少时间执行帧动画函数

};