Canva绘制时钟

通过一定的资料学习，了解到Canvas画布的强大，决定回想一下能都将时钟这一功能实现。

在绘制画布时，一般的步骤为：清空画布、改变画布状态（translate）、重新绘制图形、回到原始。

先给一下最后的画布图像是：

该开始时，决定设置一下浏览器背景颜色，这里就引用老师的源代码，相对来说大气点。

<span style="white-space:pre">	</span>body{
<span style="white-space:pre">	</span>background:
<span style="white-space:pre">	</span>linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
<span style="white-space:pre">	</span>linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
<span style="white-space:pre">	</span>linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 15<span style="white-space:pre">	</span>8px);
<span style="white-space:pre">	</span>background-color:#e1ebbd;
<span style="white-space:pre">	</span>background-size: 128px 128px;}

在着手使用Canvas时，要添加JavaScript代码。初始设定时钟、分钟、秒钟长度，通过方法调用绘出一张画布。

        var c = document.getElementById("myCs");
        var cxt = c.getContext("2d");
        var ss = 60, mm = 50, hh = 40;

分别在画布当中绘出时钟的圆心以及外圆。

		//蓝色圆心
        cxt.beginPath();
        cxt.strokeStyle = "#00f";
        cxt.fillStyle = "#00f";             // 填充颜色
        cxt.arc(100,150,5,0,2*Math.PI,true);    //钟表的圆心
        cxt.fill();                         //绘制钟表圆心
        cxt.closePath();
		//蓝色钟外圆
        cxt.beginPath();
        cxt.strokeStyle="#00f";
        cxt.arc(100,150,100,0,2*Math.PI,true);  //钟表的大圆
        cxt.stroke();
        cxt.closePath();

接下来的是要绘制出时钟外圆的刻度，以便显示正确的时间刻度。

<span style="white-space:pre">	</span>cxt.beginPath();
        cxt.translate(100,150);         //平移原点
        cxt.rotate(-Math.PI/2);
        cxt.save();
        for (var i =0;i<60;i++){
            if (i%5 ==0){
                cxt.fillRect(80,0,20,5);
                cxt.fillText(""+(i/5 ==0?12:i/5),70,0);
            }else{
                cxt.fillRect(90,0,10,2);
            }
            cxt.rotate(Math.PI/30);         //旋转图形
        }
        cxt.closePath();

得到一个有刻度的时钟框。

接下来，也就是定义一个动画绘画函数。在这个函数之前我们得先了解绘图API提供了save和restore这两个方法来保存和回复状态。这里为了方便以后了解这个两个方法之间的套用，我用了一个例子来记录。

        var c = document.getElementById("myCs");
        var ctx = c.getContext("2d");
        //设置填充色为蓝色并保存
		ctx.fillStyle = "#00f";
		ctx.save();
		//设置填充为红色
		ctx.fillStyle = "#f00";
		//绘画出一个圆
		ctx.beginPath();
		ctx.arc(100,100,15,0,Math.PI*2,true);
		ctx.fill();
		//调用恢复方法绘制一个矩形
		ctx.restore();
		ctx.beginPath();
		ctx.rect(0,0,50,50);
		ctx.fill();

  首先保存了蓝色为填充色，再设置画布填充色属性为红色，从而进行画圆。restore调用画布属性蓝色进行画矩形。这个就很好的理解了两个方法的配套使用。

了解了画布的这俩个方法后，就可以进行秒针、分针、时针的绘画了。这里定义一个刷新画布函数Update。

        var ls = 0,lm = 0,lh =0;
        function Update(){
			//清空秒针
            cxt.restore();
            cxt.save();
            cxt.rotate(ls*Math.PI/30);
            cxt.clearRect(5,-1,ss+1,2+2);
			//清空分针
            cxt.restore();
            cxt.save();
            cxt.rotate(lm*Math.PI/30);
            cxt.clearRect(5,-1,mm+1,3+2);
			//清空时针，开始画新的时针
            cxt.restore();
            cxt.save();
            cxt.rotate(lh*Math.PI/6);
            cxt.clearRect(5,-3,hh+1,4+2);
			//获取网络时间
            var time = new Date();
            var s = ls = time.getSeconds();
            var m = lm = time.getMinutes();
            var h = lh = time.getHours();
			//开始画新的秒针
            cxt.restore();
            cxt.save();
            cxt.rotate(s*Math.PI/30);
            cxt.fillRect(5,0,ss,2);
			//开始画新的分针
            cxt.restore();
            cxt.save();
            cxt.rotate(m*Math.PI/30);
            cxt.fillRect(5,0,mm,3);
			//，开始画新的时针
            cxt.restore();
            cxt.save();
            cxt.rotate(h*Math.PI/6);
            cxt.fillRect(5,-2,hh,4);
        }

也就是成功进行画布的Update，最后调用setInterval对象进行画布频率为1的更新。

        var MyInterval = setInterval("Update();",1000);

最终得到我们需要的页面时钟。

总得来说，这个还是比较简单的，我都是自己看书，不断学习与累积吧！质量不是很高，但是这也花了我好长时间去完善着文章，就当是鼓励自己咯！