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

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

　　话不多说，先看效果：http://webfront.verynet.cc/pc/canvas-clock.html

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

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

　　HTML结构代码：

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

　　CSS样式代码：

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

　　JS脚本代码:

  1 <script type="text/javascript">
  2         var canvas = document.getElementById("canvas");
  3         //获取Canvas的2d上下文对象
  4         var context = canvas.getContext("2d");
  5
  6         //定义一个初始化函数
  7         function init(){
  8             //先清除画布上的所有图像
  9             context.clearRect(0,0,500,500);
 10
 11             //获取系统时间
 12             var date = new Date();
 13             var hours = date.getHours();
 14             //因为钟表是12小时制,所以必须对时刻度进行控制
 15             hours = hours > 12 ? hours-12 : hours;
 16             var minutes = date.getMinutes();
 17             var seconds = date.getSeconds();
 18
 19             //开始画表盘
 20             context.beginPath();
 21             //在画布中心250,250点上画一个圆
 22             context.arc(250,250,200,0,360,false);
 23             //定义画笔的宽度
 24             context.lineWidth = 10;
 25             //定义画笔颜色
 26             context.strokeStyle = "#000";
 27             //关闭绘画路径
 28             context.closePath();
 29             //上色
 30             context.stroke();
 31
 32             //开始画刻度
 33             //时刻度
 34             for(var h = 0;h < 12;h++){
 35                 //先将图像进行保存
 36                 context.save();
 37                 context.lineWidth = 8;
 38                 context.strokeStyle = "#f00";
 39                 //定义旋转中心点
 40                 context.translate(250,250);
 41                 //定义旋转角度
 42                 context.rotate(h*30*Math.PI/180);
 43                 context.beginPath();
 44                 context.moveTo(0,190);
 45                 context.lineTo(0,170);
 46                 context.closePath();
 47                 context.stroke();
 48                 //将之前的保存的图像显示,形成新的图像
 49                 context.restore();
 50             }
 51             //分刻度
 52             for(var m = 0;m < 60;m++){
 53                 context.save();
 54                 context.lineWidth = 4;
 55                 context.strokeStyle = "red";
 56                 context.translate(250, 250);
 57                 context.rotate(m*6*Math.PI/180);
 58                 context.beginPath();
 59                 context.moveTo(0, 190);
 60                 context.lineTo(0, 180);
 61                 context.closePath();
 62                 context.stroke();
 63                 context.restore();
 64             }
 65
 66             //画时针
 67             context.save();
 68             context.lineWidth = 8;
 69             context.strokeStyle = "#000";
 70             context.translate(250,250);
 71             context.rotate(hours*30*Math.PI/180);
 72             context.beginPath();
 73             context.moveTo(0,10);
 74             context.lineTo(0,-100);
 75             context.closePath();
 76             context.stroke();
 77             context.restore();
 78
 79             //画分针
 80             context.save();
 81             context.lineWidth = 4;
 82             context.strokeStyle = "#000";
 83             context.translate(250,250);
 84             context.rotate(minutes*6*Math.PI/180);
 85             context.beginPath();
 86             context.moveTo(0,10);
 87             context.lineTo(0,-140);
 88             context.closePath();
 89             context.stroke();
 90             context.restore();
 91
 92             //画秒针
 93             context.save();
 94             context.lineWidth = 2;
 95             context.strokeStyle = "blue";
 96             context.translate(250,250);
 97             context.rotate(seconds*6*Math.PI/180);
 98             context.beginPath();
 99             context.moveTo(0,10);
100             context.lineTo(0,-170);
101             context.closePath();
102             context.stroke();
103             context.restore();
104         }
105         //调用定时器，在每秒刷新重绘新图像
106         setInterval(init,1000);
107     </script>

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

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

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