在html5中canvas制作时钟感觉像切菜一样的简单了，在这里小编整理了一个html5使用canvas绘制时钟示例，希望文章对各位有帮助。

准备工作

在HTML中指定一个区域放置时钟：

<div id="clock" style="position: relative;"></div>

时钟的一些外观设定：

var width = 260; // 桌布宽度 var height= 260; // 桌布高度 var dot = {     x : width / 2,     y : height / 2,     radius : 6 }; // 圆点位置、半径 var radius = 120; // 圆半径 var borderWidth = 6; // 圆边框宽度

创建<canvas>元素：

var clock = document.getElementById('clock'); var clockBg = document.createElement('canvas'); var clockPointers = document.createElement('canvas'); clockPointers.width = clockBg.width = width; clockPointers.height = clockBg.height = height; clockPointers.style.position = 'absolute'; clockPointers.style.left = 0; clockPointers.style.right = 0; clock.appendChild(clockBg); clock.appendChild(clockPointers);

这里要创建两个<canvas>元素，目的在于把时钟的圆盘跟指针分离开。这是因为指针要根据当前时间擦除重绘，如果放置在一个<canvas>中，擦除的时候就会把圆盘也给擦掉了。

绘制圆盘

但凡要在<canvas>中绘图，都要先获得其上下文，对应的接口是 canvas.getContext：

var bgCtx = clockBg.getContext('2d');

目前canvas.getContext接口的唯一一个合法参数是'2d'，将来应该会支持3D绘图。

先来绘制最外面的圆框：

bgCtx.beginPath(); bgCtx.lineWidth = borderWidth; bgCtx.strokeStyle = '#000'; bgCtx.arc(dot.x, dot.y, radius, 0, 2 * Math.PI, true); bgCtx.stroke(); bgCtx.closePath();

调用 context.beginPath() 新建路径；
设置颜色等样式；
调用路径函数生成路径；
画线（stroke）或者填充（fill）；
调用 context.closePath() 关闭路径；
上面用到的 context.arc 接口可以生成圆弧路径，其详细说明参见此处。

用类似的方法，画出圆点：

bgCtx.beginPath(); bgCtx.fillStyle = '#000'; bgCtx.arc(dot.x, dot.y, dot.radius, 0, 2 * Math.PI, true); bgCtx.fill(); bgCtx.closePath();

 

此时，结果如下图所示：

绘制刻度

 

最复杂的地方就是画刻度了，这里要先复习一下数学中的三角函数：

刻度的起始位置就是圆框上的一个点，第一步就是要知道这个点的坐标。上图中：

sinθ = AC / AO cosθ = OC / AO

其中AO即为圆半径，而θ的值则根据刻度而定。0是π/2，3是0，6是3π/2，9是π

 

由此可得到刻度起始点的位置为：

x = 圆点横坐标 + AO * cosθ
y = 圆点纵坐标 + AO * sinθ
同理可算出刻度结束点的位置为（结束点相当于在一个半径为圆框半径-刻度长度的圆上）：

x = 圆点横坐标 + (AO - 刻度长度) * cosθ
y = 圆点纵坐标 + (AO - 刻度长度) * sinθ
于是，这程序可以写了：

for (var i = 0, angle = 0, tmp, len; i < 60; i++) {     bgCtx.beginPath();     // 突出显示能被5除尽的刻度     if (0 === i % 5) {         bgCtx.lineWidth = 5;         len = 12;         bgCtx.strokeStyle = '#000';     } else {         bgCtx.lineWidth = 2;         len = 6;         bgCtx.strokeStyle = '#999';     }     tmp = radius - borderWidth / 2; // 因为圆有边框，所以要减去边框宽度     bgCtx.moveTo(         dot.x + tmp * Math.cos(angle),         dot.y + tmp * Math.sin(angle)     );     tmp -= len;     bgCtx.lineTo(dot.x + tmp * Math.cos(angle), dot.y + tmp * Math.sin(angle));     bgCtx.stroke();     bgCtx.closePath();     angle += Math.PI / 30; // 每次递增1/30π }

画好刻度后，结果应该是这样：

时钟刻度

画指针

先得获取指针<canvas>的上下文：