HTML5应用之时钟

利用HTML5的Canvas API可以完成我们以前意想不到的动画效果，以前我们想在网页上放置一个时钟，需要先用flash工具制作一个钟表，并写上复杂的JavaScript代码，然后载入到页面中。而HTML5的到来，我们可以直接在页面中使用canvas标签并配合javascript就可以完成一个漂亮的时钟。今天，我们一起来使用HTML5制作一个指针会走动的时钟。HTML我们只需要在html中放置一个canvas标签：#clock，宽度和高度都是400px。

[html] view plaincopy 我们先来获取当前时间：包括时分秒，确保在打开页面时能定位指针位置，并且定义好圆点坐标和秒钟角度变量。

[js] view plaincopy 首先，获取canvas绘图对象，绘制时钟刻度。我们将时钟（圆）划分为12个刻度，即每个刻度代表一个钟头，当然，你也可以划分为60个刻度，这样每个刻度就代表1分钟。

[js] view plaincopy 

[js] view plaincopy 函数pointer()用来绘制指针。其中ctx表示canvas对象，x,y是圆点坐标，z是指针头的位置。

[js] view plaincopy 

[js] view plaincopy 

[js] view plaincopy 

原标题：HTML5应用之时钟

关键词：HTML