漂亮的canvas圆形时钟样式html5代码

一款比较漂亮html5的canvas圆形时钟，整个色彩比较鲜亮，纯javascript绘制出来的，样式都可以在clock.js里面调整，看个人喜好吧。

分类：html5 > canvas 难易：

查看演示下载资源下载积分： 20 积分

头部样式非常简单，没有任何外部样式的引入，只有几行样式代码如下：

#clock{
	margin: 0 auto;
	display: block;
}

body部分只有两行，<canvas> 标签作为图形容器，clock.js在此容器里绘制出整个时钟：

<canvas width="200px" height="200px" id="clock" ></canvas>
<script type="text/javascript" src="js/clock.js"></script>

clock.js也不算复杂，按部就班的绘制外圈、点、时针、分针、秒针等，部分代码如下：

function drawhHour(hour, minute){
    ctx.save()
    ctx.beginPath();
     var rad = 2 * Math.PI/12 *hour;
    var mrad = 2 * Math.PI / 12 /60 * minute;
    ctx.rotate(rad + mrad);
    ctx.lineWidth = 5;
    ctx.lineCap = "round"
    ctx.moveTo(0, 10);
    ctx.lineTo(0, -r/2);
    ctx.stroke();
    ctx.restore();

}