这是mdn上的例子，怎么说呢，比较复古吧。
首先，找一张时钟的图片，就是下面这张了。
——来自bigger than bigger的dribbble网站，图片来源（侵删）
然后就开始用canvas实现这个逼格满满的时钟吧。在html代码中插入canvas标签
在js文件中创建画布（假设我们使用的都是现代浏览器）。
function clock() { var ctx = document.getelementbyid('canvas').getcontext('2d'); }
先来绘制时钟表盘，我们看到这张图是带有光线阴影效果的，画成一样难度太高。于是就用颜色的渐变来让时钟看起来稍微立体一点。在canvas中用createlineargradient来创建一个新的渐变，并用addcolorstop上色，最后把颜色赋给strokestyle。详见运用样式与颜色 by mdn
//绘制表盘底色 ctx.translate(200, 200); //将坐标原点移到画布中心 ctx.rotate(-math.pi/2); //将坐标轴逆时针旋转90度，x轴正方向对准12点方向 var lingrad = ctx.createlineargradient(150, 0, -150, 0); lingrad.addcolorstop(0, '#242f37'); lingrad.addcolorstop(1, '#48585c'); ctx.fillstyle = lingrad; ctx.beginpath(); ctx.arc(0, 0, 150, 0, math.pi * 2, true); ctx.fill();
比较关键的一点是画布的坐标轴x轴正方向是时钟3点钟方向，为了方便起见，我们把它逆时针旋转90度让它指向十二点钟方向。
绘制刻度要用到旋转rotate（变形 transformations by mdn），小时刻度有12个，相邻两个刻度与圆心连线的角度就是math.pi/6，这里用的是弧度表示，也就是30度。那么我们就用for循环来画出小时的刻度。
for (var i = 0; i < 12; i++) { ctx.beginpath(); ctx.strokestyle = '#fff'; ctx.linewidth = 3; ctx.rotate(math.pi / 6); ctx.moveto(140, 0); ctx.lineto(120, 0); ctx.stroke(); }
同理，分钟的刻度也一样。
ctx.beginpath(); for (i = 0; i 12 ? hr - 12 : hr;
那么，时针的位置就是（相对于x轴正方向转过的角度）：
ctx.rotate(hr * (math.pi / 6) + min * (math.pi / 360) + sec * (math.pi / 21600));
同理，分针和秒针的位置：
ctx.rotate(min * (math.pi / 30) + sec * (math.pi/1800)); //分针ctx.rotate(sec * (math.pi /30)); //秒针
最后，最关键的让指针转动起来，这里要用到的是requestanimationframe方法，用来重绘页面，得到连贯逐帧的动画，实现最佳的动画效果。
window.requestanimationframe(callback);
这个callback就是我们的绘制时钟的clock()函数。需要注意的是每次执行完requestanimationframe后需要清除画布，不然出现重叠交错的现象，我们把它放在clock函数开始的地方。
ctx.clearrect(0, 0, canvas.width, canvas.height);
到这里，动画时钟就ok了 效果图如下：
演示地址http://codepen.io/lifeng1893/pen/alpamr