ff下效果图：
html5之Canvas坐标变换应用-时钟实例 代码：
html5之Canvas坐标变换应用-时钟实例 html5之Canvas坐标变换应用-时钟实例 <html> <head> </head> <body> <canvas id="mycanvas" width="600" height="300">你的浏览器还不支持哦</canvas> <script type="text/javascript"> var c = document.getelementbyid("mycanvas"); var cxt = c.getcontext("2d"); var slen = 60; var mlen = 50; var hlen = 40; cxt.strokerect(0, 0, c.width, c.height); cxt.beginpath(); cxt.strokestyle = "#00f"; cxt.fillstyle = "#00f"; cxt.arc(200, 150, 5, 0, 2 * math.pi, true); cxt.fill(); cxt.closepath(); cxt.arc(200, 150, 100, 0, 2 * math.pi, true); cxt.stroke(); cxt.translate(200, 150); //平移原点； cxt.rotate(-math.pi / 2); cxt.save(); for (var i = 0; i < 60; i++) { if (i % 5 == 0) { // cxt.fillstyle = "#ff0000"; cxt.fillrect(80, 0, 20, 5); cxt.filltext("" + (i / 5 == 0 ? 12 : i / 5), 70, 0); } else { // cxt.strokestyle = "#00f"; cxt.fillrect(90, 0, 10, 2); } //document.getelementbyid("div1").innertext += " " + i; cxt.rotate(math.pi / 30); } var ls = 0, lm = 0, lh = 0; function refresh() { cxt.restore(); cxt.save(); cxt.rotate(ls * math.pi / 30); cxt.clearrect(5, -1, slen+1, 2+2); cxt.restore(); cxt.save(); cxt.rotate(lm * math.pi / 30); cxt.clearrect(5, -1, mlen+1, 3+2); cxt.rotate(lh * math.pi / 6); cxt.clearrect(5, -3, hlen+1, 4+2); var time = new date(); var s = ls=time.getseconds(); var m = lm=time.getminutes(); var h = lh=time.gethours(); cxt.restore(); cxt.save(); cxt.rotate(s * math.pi / 30); cxt.fillrect(5, 0, slen, 2); cxt.restore(); cxt.save(); cxt.rotate(m * math.pi / 30); cxt.fillrect(5, 0, mlen, 3); cxt.rotate(h * math.pi / 6); cxt.fillrect(5, -2, hlen, 4); var myinterval = setinterval("refresh();", 1000); </script> <div id="div1" style=" background:#00f;"></div> </body> </html>html5之Canvas坐标变换应用-时钟实例 html5之Canvas坐标变换应用-时钟实例
我的html5系列：
<a href="http://www.cnblogs.com/whitewolf/archive/2011/02/28/1967456.html">html5声频audio和视频video</a>
<a href="http://www.cnblogs.com/whitewolf/archive/2011/03/02/1968512.html">html5-canvas绘图</a>
<a href="http://www.cnblogs.com/whitewolf/archive/2011/03/02/1969398.html" target="_blank">html5之canvas坐标变换应用-时钟实例</a>
<a href="http://www.cnblogs.com/whitewolf/archive/2011/03/04/1970457.html" target="_blank">html5-web本地存储</a>