html5 canvas 时钟实例

从网上找了一段时钟实例的小程序，然后我把它移到jQueryMobile代码结构中，先看下效果：

再看下代码：

<!DOCTYPE html>
<html>
<head>
<title>html5 clock</title>
<meta content="text/html; charset=UTF-8">
</head>

<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript"> 
        var c = document.getElementById("myCanvas"); 
        var cxt = c.getContext("2d"); 
        
                var slen = 60; 
        var mlen = 48; 
        var hlen = 35; 
                
        cxt.strokeRect(0, 0, c.width, c.height); 
        
                cxt.beginPath(); 
        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.fillRect(84, -3, 16, 6); 
                cxt.fillText("" + (i / 5 == 0 ? 12 : (i / 5>9?i/5:"0"+i/5)), 70, 3); 
            } else { 
                cxt.fillRect(90, -1, 10, 2); 
            } 
            cxt.rotate(Math.PI / 30); 
        } 
        cxt.closePath(); 

        var s = 0, m = 0, h = 0;
                 
                function Refresh() { 
                        cxt.restore(); 
                    cxt.save();
                    cxt.rotate(s * Math.PI / 30); 
                    cxt.clearRect(-13, -2, slen+2, 4); 
                            cxt.restore(); 
                        cxt.save(); 
                        
                        cxt.rotate((m+s/60) * Math.PI / 30); 
                    cxt.clearRect(-11, -2, slen+2, 4); 
                            cxt.restore(); 
                        cxt.save(); 

                    cxt.rotate((h+m/60) * Math.PI / 6); 
                    cxt.clearRect(-9, -3, slen+2, 5); 
            cxt.restore(); 
            cxt.save();
                        
                    var time = new Date(); 
            s =time.getSeconds(); 
            m =time.getMinutes(); 
            h =time.getHours();            

            cxt.rotate((h+m/60) * Math.PI / 6); 
            cxt.fillRect(-8, -2, hlen, 4);                                   
            cxt.restore(); 
                        cxt.save();
                         
            cxt.rotate((m+s/60) * Math.PI / 30); 
            cxt.fillRect(-10, -1.5, mlen, 3); 
            cxt.restore(); 
                        cxt.save();

                        cxt.rotate(s * Math.PI / 30); 
                        cxt.fillStyle='#2e2';
            cxt.fillRect(-12, -1, slen, 2);
                } 
                
                var MyInterval = setInterval("Refresh();", 1000); 
</script>
</body>
</html>

显示结果，如下：

posted @ 2012-02-08 20:06  脉凌网络  阅读(1208)  评论(3)  编辑  收藏  举报