在上一篇中我们了解html5的Canvas ,在这一篇中不用多说,写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移(translate)和旋转变换(ratate),以及html5 Canvas的路径绘图,beginPath,closePath,rect,arc等,还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制,save,restore。

   多的也不说了,直接上代码,有不解的欢迎提问,以及对我的建议指教都可以,X@8}U9MLE}EBUE273)]9PGF

ff下效果图:

代码:

  1. View Code   
  2.  
  3. <html>   
  4. <head>   
  5. </head>   
  6. <body>   
  7.     <canvas id="myCanvas" width="600" height="300">你的浏览器还不支持哦</canvas>   
  8.  
  9.     <script type="text/javascript">   
  10.         var c = document.getElementById("myCanvas");   
  11.         var cxt = c.getContext("2d");   
  12.         var slen = 60;   
  13.         var mlen = 50;   
  14.         var hlen = 40;   
  15.         cxt.strokeRect(0, 0, c.width, c.height);   
  16.         cxt.beginPath();   
  17.         cxt.strokeStyle = "#00f";   
  18.         cxt.fillStyle = "#00f";   
  19.         cxt.arc(200, 150, 5, 0, 2 * Math.PI, true);   
  20.         cxt.fill();   
  21.         cxt.closePath();   
  22.  
  23.         cxt.beginPath();   
  24.         cxt.strokeStyle = "#00f";   
  25.         cxt.arc(200, 150, 100, 0, 2 * Math.PI, true);   
  26.         cxt.stroke();   
  27.         cxt.closePath();   
  28.         cxt.beginPath();   
  29.         cxt.translate(200, 150); //平移原点;   
  30.         cxt.rotate(-Math.PI / 2);   
  31.         cxt.save();          
  32.         for (var i = 0; i < 60; i++) {   
  33.             if (i % 5 == 0) {   
  34.                 //                cxt.fillStyle = "#ff0000";   
  35.                 cxt.fillRect(80, 0, 20, 5);   
  36.                 cxt.fillText("" + (i / 5 == 0 ? 12 : i / 5), 70, 0);   
  37.             } else {   
  38.                // cxt.strokeStyle = "#00f";   
  39.                 cxt.fillRect(90, 0, 10, 2);   
  40.             }   
  41.             //document.getElementById("div1").innerText += " " + i;   
  42.             cxt.rotate(Math.PI / 30);   
  43.         }   
  44.         cxt.closePath();   
  45.  
  46.         var ls = 0, lm = 0, lh = 0;   
  47. function Refresh() {   
  48.     cxt.restore();   
  49.     cxt.save();   
  50.     cxt.rotate(ls * Math.PI / 30);   
  51.     cxt.clearRect(5, -1, slen+1, 2+2);   
  52.     cxt.restore(); cxt.save();   
  53.  
  54.     cxt.rotate(lm * Math.PI / 30);   
  55.     cxt.clearRect(5, -1, mlen+1, 3+2);   
  56.     cxt.restore(); cxt.save();   
  57.  
  58.     cxt.rotate(lh * Math.PI / 6);   
  59.     cxt.clearRect(5, -3, hlen+1, 4+2);   
  60.  
  61.     var time = new Date();   
  62.             var s = ls=time.getSeconds();   
  63.             var m = lm=time.getMinutes();   
  64.             var h = lh=time.getHours();              
  65.             cxt.restore();   
  66.             cxt.save();   
  67.             cxt.rotate(s * Math.PI / 30);   
  68.             cxt.fillRect(5, 0, slen, 2);   
  69.             cxt.restore(); cxt.save();   
  70.             cxt.rotate(m * Math.PI / 30);   
  71.             cxt.fillRect(5, 0, mlen, 3);   
  72.             cxt.restore(); cxt.save();   
  73.             cxt.rotate(h * Math.PI / 6);   
  74.             cxt.fillRect(5, -2, hlen, 4);   
  75.         }   
  76.         var MyInterval = setInterval("Refresh();", 1000);   
  77.     </script>   
  78. <div id="div1" style=" background:#00f;"></div>   
  79. </body>   
  80. </html>  
  81. 复制代码 
我的html5系列
  1. html5声频audio和视频video
  2. html5-Canvas绘图
  3. html5之Canvas坐标变换应用-时钟实例4.
  4. html5-web本地存储