利用HTML5 Canvas實現一個時鐘

jopen 12年前發布 | 100K 次閱讀 HTML5 前端技術

本時鐘是通過HTML5的Canvas實現的，相關的技術大家可以到這兒去看看： 鏈接地址 
下面就沒有什么好所的了，上面的鏈接中有詳細的說明，有圖有真相 ～～
利用HTML5 Canvas實現一個時鐘



下面是代碼：

<html>
    <head>
        <title>HTML5 Test</title>
        <script type="application/x-javascript">
            var panel, ctx, img;
            var pw, ph, ox, oy;
            function init(){
                panel = document.getElementById("panel");
                pw = panel.width;
                ph = panel.height;
                ox = pw/2;
                oy = ph/2;
                if(panel.getContext){
                    ctx = panel.getContext('2d');
                }else{
                    alert('Your browser is not support Canvas tag!');
                }



            ctx.translate(ox, oy);

            img = new Image();
            img.onload = function(){
                setInterval('draw()',1000);
            }
            img.src = 'bg.jpg';
        }


        function drawSecond(){
            ctx.save();
            ctx.rotate(Math.PI/180*currTime().s*6);
            ctx.strokeStyle = "#09f";
            ctx.lineWidth = 2;
            ctx.lineCap = 'round'
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(0,-140);
            ctx.stroke();
            ctx.restore();
        }

        function drawMinute(){
            ctx.save();
            ctx.rotate(Math.PI/180*currTime().m*6);
            ctx.strokeStyle = "#f90";
            ctx.lineWidth = 6;
            ctx.lineCap = 'round'
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(0,-100);
            ctx.stroke();
            ctx.restore();
        }

        function drawHour(){
            ctx.save();
            ctx.rotate(Math.PI/180*currTime().h*30+Math.PI/180*currTime().m/



2);
                ctx.strokeStyle = "#999";
                ctx.lineWidth = 10;
                ctx.lineCap = 'round'
                ctx.beginPath();
                ctx.moveTo(0,0);
                ctx.lineTo(0,-60);
                ctx.stroke();
                ctx.restore();
            }
            function draw(){
                ctx.clearRect(-pw/2,-ph/2,pw,ph);
                drawBackground();
                drawSecond();
                drawMinute();
                drawHour();
                document.getElementById('time').innerHTML=currTimeStr();
            }



        function drawBackground(){
                ctx.save();
                ctx.translate(0, 0);
                ctx.drawImage(img,-250,-250,500,500);
                ctx.restore();
        }

        function currTimeStr(){
            var d = new Date();
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();
            return h+':'+m+':'+s
        }

        function currTime(){
            var d = new Date();
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();
            if(h>12){
                h = h-12;
            }
            return {"h":h,"m":m,"s":s}; 
        }
    </script>
</head>
<body onload="init()">
    <canvas style="border:1px solid #000" id="panel" width="500" height="500



">
            Your browser is not support Canvas tag!
        </canvas>
        <br/>
        <span id="time"></span>
    </body>
</html></pre>下面是背景圖片：
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！