代码改变世界

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

2011-03-02 23:20 by 破狼, ... 阅读, ... 评论, 收藏, 编辑

 

在上一篇中我们了解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(
00, c.width, c.height); 
        cxt.beginPath(); 
        cxt.strokeStyle 
= "#00f"
        cxt.fillStyle 
= "#00f"
        cxt.arc(
200150502 * Math.PI, true); 
        cxt.fill(); 
        cxt.closePath(); 

        cxt.beginPath(); 
        cxt.strokeStyle 
= "#00f"
        cxt.arc(
20015010002 * Math.PI, true); 
        cxt.stroke(); 
        cxt.closePath(); 
        cxt.beginPath(); 
        cxt.translate(
200150); //平移原点; 
        cxt.rotate(-Math.PI / 2); 
        cxt.save();        
        
for (var i = 0; i < 60; i++) { 
            
if (i % 5 == 0) { 
                
//                cxt.fillStyle = "#ff0000"; 
                cxt.fillRect(800205); 
                cxt.fillText(
"" + (i / 5 == 0 ? 12 : i / 5), 700); 
            } 
else { 
               
// cxt.strokeStyle = "#00f"; 
                cxt.fillRect(900102); 
            } 
            
//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+12+2); 
    cxt.restore(); cxt.save(); 

    cxt.rotate(lm 
* Math.PI / 30); 
    cxt.clearRect(
5-1, mlen+13+2); 
    cxt.restore(); cxt.save(); 

    cxt.rotate(lh 
* Math.PI / 6); 
    cxt.clearRect(
5-3, hlen+14+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(
50, slen, 2); 
            cxt.restore(); cxt.save(); 
            cxt.rotate(m 
* Math.PI / 30); 
            cxt.fillRect(
50, 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本地存储