使用canvas绘制时钟

什么使canvas呢？HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。<canvas> 标签只是图形容器，所以我们必须使用脚本来绘制图形。通过它可以绘制路径,盒、圆、字符以及添加图像等等。

　　常用的API

这篇博文，我将通过html5中的canvas元素绘制一个走动的时钟。

　　html代码如下：

　　其中id这个属性是必须要添加的，因为后面在JavaScript脚本中，我们会通过它来获得这个元素。 注意到width和height都是没有单位的，默认为px。 且<canvas>元素是没有内容的，当然，也可以写一些内容，对于不支持canvas标签的浏览器来说，它会显示其中的内容，而对于支持canvas标签的浏览器而言，其中的内容会被自动忽略。故其效果和<noscript>标签是一样的。我们还可以通过style属性来为canvas画布添加一个边框，这样就可以直接在页面中看到效果了。

　　注意：canvas元素默认是inline。

　　JavaScript代码如下：

　　这样，一个canvas绘制的时钟就完成了。看看最后的效果图吧：