用canvas完成超炫酷的数字时钟

 <canvas id="canvas" style="height:100%">

这次要完成的是一个很炫酷很炫酷的时钟，

如图

 

每一次时钟更新都伴随有很多彩色小球落下，很不是很赞啊！O(∩_∩)O~

这个东西呢，主要用到了两个方面的东西：canvas和js中的Date对象，

涉及到的canvas属性和方法有：

Canvas的声明

        当前浏览器不支持Canvas，请更换浏览器后再试

</canvas>

设置canvas画布的宽高：

  

canvas.width = WINDOW_WIDTH;
    canvas.height = 600;

以及canvas中的context绘图以及其方法：

<span style="white-space:pre">	</span>var canvas = document.getElementById('canvas');
    <span style="white-space:pre">	</span>var context = canvas.getContext("2d");
 <span style="white-space:pre">	</span>cxt.beginPath();
        cxt.arc( balls[i].x , balls[i].y , RADIUS , 0 , 2*Math.PI , true );
        cxt.closePath();
 
        cxt.fill();

Date对象涉及到有：

声明：

var curtime=new Date();

getHours().getMinutes(),getSeconds(),getTimes()等方法

下面就一步一步说一下是如何完成这个实验的，

①首先应该完成的就是如何用点阵的方式讲时间绘制出来，

对于这种绘制图像的东西如果是做过俄罗斯方块等小游戏的同学都知道，