HTML5之Canvas时钟(网页效果--每日一更)

　　今天，带来的是使用HTML5中Canvas标签实现的动态时钟效果。

　　话不多说，先看效果：亲，请点击这里

　　众所周知，Canvas标签是HTML5中的灵魂，HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域。即时模式是指在画布上呈现像素的方式，

　　HTML5 Canvas通过JavaScript调用CanvasAPI，在每一帧完全重绘屏幕上的位图。详细将在下面代码进行说明。

　　HTML结构代码：

     <canvas id="canvas" width="500" height="500">
         您的浏览器不支持Canavas标签,请升级浏览器再查看此页面!
     </canvas>

　　CSS样式代码：

     <style type="text/css">
         *{margin:0px;padding:0px;}
         .canvasbox{margin:50px auto;background:#dadada;width:500px;}
     </style>

　　JS脚本代码:

 <script type="text/javascript">
         var canvas = document.getElementById("canvas");
         //获取Canvas的2d上下文对象
         var context = canvas.getContext("2d");

         //定义一个初始化函数
         function init(){
             //先清除画布上的所有图像
             context.clearRect(0,0,500,500);

             //获取系统时间
             var date = new Date();
             var hours = date.getHours();
             //因为钟表是12小时制,所以必须对时刻度进行控制
             hours = hours > 12 ? hours-12 : hours;
             var minutes = date.getMinutes();
             var seconds = date.getSeconds();

             //开始画表盘
             context.beginPath();
             //在画布中心250,250点上画一个圆
             context.arc(250,250,200,0,360,false);
             //定义画笔的宽度
             context.lineWidth = 10;
             //定义画笔颜色
             context.strokeStyle = "#000";
             //关闭绘画路径
             context.closePath();
             //上色
             context.stroke();

             //开始画刻度
             //时刻度
             for(var h = 0;h < 12;h++){
                 //先将图像进行保存
                 context.save();
                 context.lineWidth = 8;
                 context.strokeStyle = "#f00";
                 //定义旋转中心点
                 context.translate(250,250);
                 //定义旋转角度
                 context.rotate(h*30*Math.PI/180);
                 context.beginPath();
                 context.moveTo(0,190);
                 context.lineTo(0,170);
                 context.closePath();
                 context.stroke();
                 //将之前的保存的图像显示,形成新的图像
                 context.restore();
             }
             //分刻度
             for(var m = 0;m < 60;m++){
                 context.save();
                 context.lineWidth = 4;
                 context.strokeStyle = "red";
                 context.translate(250, 250);
                 context.rotate(m*6*Math.PI/180);
                 context.beginPath();
                 context.moveTo(0, 190);
                 context.lineTo(0, 180);
                 context.closePath();
                 context.stroke();
                 context.restore();
             }

             //画时针
             context.save();
             context.lineWidth = 8;
             context.strokeStyle = "#000";
             context.translate(250,250);
             context.rotate(hours*30*Math.PI/180);
             context.beginPath();
             context.moveTo(0,10);
             context.lineTo(0,-100);
             context.closePath();
             context.stroke();
             context.restore();

             //画分针
             context.save();
             context.lineWidth = 4;
             context.strokeStyle = "#000";
             context.translate(250,250);
             context.rotate(minutes*6*Math.PI/180);
             context.beginPath();
             context.moveTo(0,10);
             context.lineTo(0,-140);
             context.closePath();
             context.stroke();
             context.restore();

             //画秒针
             context.save();
             context.lineWidth = 2;
             context.strokeStyle = "blue";
             context.translate(250,250);
             context.rotate(seconds*6*Math.PI/180);
             context.beginPath();
             context.moveTo(0,10);
             context.lineTo(0,-170);
             context.closePath();
             context.stroke();
             context.restore();
         }
         //调用定时器，在每秒刷新重绘新图像
         setInterval(init,1000);
     </script>

　　其中，蕴含着一个小BUG。在绘画时刻度和分刻度时，若颜色不一时，会出现重叠现象，因为在绘画时刻度后，再进行绘画分刻度，故小编将两刻度颜色设置为一致，避免该现象产生。当然，也可以通过判断去进行处理，小编就不在此进行处理。

　　在浏览该效果时，请使用支持HTML5的浏览器，以免影响浏览效果。

　　享受代码，享受生活，网页效果，每日一更。