在上一篇中我们了解html5的Canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等，还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。 多的也不说了，直接上代码，有不解的欢迎提问，以及对我的建议指教都可以。 ff下效果图： 代码： 复制代码代码如下: 你的浏览器还不支持哦 <br />var c = document.getElementById("myCanvas"); <br />var cxt = c.getContext("2d"); <br />var slen = 60; <br />var mlen = 50; <br />var hlen = 40; <br />cxt.strokeRect(0, 0, c.width, c.height); <br />cxt.beginPath(); <br />cxt.strokeStyle = "#00f"; <br />cxt.fillStyle = "#00f"; <br />cxt.arc(200, 150, 5, 0, 2 * Math.PI, true); <br />cxt.fill(); <br />cxt.closePath(); <br />cxt.beginPath(); <br />cxt.strokeStyle = "#00f"; <br />cxt.arc(200, 150, 100, 0, 2 * Math.PI, true); <br />cxt.stroke(); <br />cxt.closePath(); <br />cxt.beginPath(); <br />cxt.translate(200, 150); //平移原点； <br />cxt.rotate(-Math.PI / 2); <br />cxt.save(); <br />for (var i = 0; i < 60; i++) { <br />if (i % 5 == 0) { <br />// cxt.fillStyle = "#ff0000"; <br />cxt.fillRect(80, 0, 20, 5); <br />cxt.fillText("" + (i / 5 == 0 ? 12 : i / 5), 70, 0); <br />} else { <br />// cxt.strokeStyle = "#00f"; <br />cxt.fillRect(90, 0, 10, 2); <br />} <br />//document.getElementById("div1").innerText += " " + i; <br />cxt.rotate(Math.PI / 30); <br />} <br />cxt.closePath(); <br />var ls = 0, lm = 0, lh = 0; <br />function Refresh() { <br />cxt.restore(); <br />cxt.save(); <br />cxt.rotate(ls * Math.PI / 30); <br />cxt.clearRect(5, -1, slen+1, 2+2); <br />cxt.restore(); cxt.save(); <br />cxt.rotate(lm * Math.PI / 30); <br />cxt.clearRect(5, -1, mlen+1, 3+2); <br />cxt.restore(); cxt.save(); <br />cxt.rotate(lh * Math.PI / 6); <br />cxt.clearRect(5, -3, hlen+1, 4+2); <br />var time = new Date(); <br />var s = ls=time.getSeconds(); <br />var m = lm=time.getMinutes(); <br />var h = lh=time.getHours(); <br />cxt.restore(); <br />cxt.save(); <br />cxt.rotate(s * Math.PI / 30); <br />cxt.fillRect(5, 0, slen, 2); <br />cxt.restore(); cxt.save(); <br />cxt.rotate(m * Math.PI / 30); <br />cxt.fillRect(5, 0, mlen, 3); <br />cxt.restore(); cxt.save(); <br />cxt.rotate(h * Math.PI / 6); <br />cxt.fillRect(5, -2, hlen, 4); <br />} <br />var MyInterval = setInterval("Refresh();", 1000); <br />
