代码改变世界

html5之Canvas坐标变换应用-时钟实例

2011-03-02 23:20  破狼  阅读(5691)  评论(3)  编辑  收藏  举报

 

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

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

ff下效果图：

51BU_~OA@BJ_FS{`)IO7T4P

代码：

View Code
<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.beginPath(); 
        cxt.strokeStyle = "#00f"; 
        cxt.arc(200, 150, 100, 0, 2 * Math.PI, true); 
        cxt.stroke(); 
        cxt.closePath(); 
        cxt.beginPath(); 
        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); 
        } 
        cxt.closePath(); 

        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.restore(); cxt.save(); 

    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.restore(); cxt.save(); 
            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系列：

    1. html5声频audio和视频video
    2. html5-Canvas绘图
    3. html5之Canvas坐标变换应用-时钟实例
    4. html5-web本地存储