在上一篇中我們了解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 />
