HTML5绘图canvas教程——绘制时钟

用到的方法有beginPath();arc()；moveTo()；lineTo()；stroke();beginPath()是用来启动绘制路径的，中间的arc,moveTo,lineTo,都是绘制路径的方法过程，最后通过stroke方法来结束绘制。

首先，获得canvas上下文对象var context=drawing.getContext('2d');，但后启动绘制，绘制一个外圆  context.beginPath();  context.arc(400,400,99,0,2*Math.PI,false);

然后移动到圆心，绘制一个内圆，半径略小context.moveTo(494,400);context.arc(400,400,94,0,2*Math.PI,false);

接着绘制时针，移动到圆心，使用lineTo()方法绘制到终点，时针短，不需要绘制太长context.moveTo(400,400); context.lineTo(335,400)

最后绘制分针，移动到圆心，使用lineTo()方法绘制到终点，分针比时针长些         context.moveTo(400,400);        context.lineTo(400,315);

时钟就完成了，最后给出demo源码：<  绘图区域