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的浏览器，以免影响浏览效果。

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