通过Html5新元素＜canvas＞绘制时钟

HTML5 <canvas> 元素用于图形的绘制，通常是JavaScript来完成.

效果如下：

 html和css代码就不发了，就一个div，给定一定的高度和宽度，然后在div里面利用<canvas>新元素通过js来完成，期间有点麻烦。

js代码如下：

<script>
        /** @type{HTMLCanvasElement}*/
        var canvas = document.getElementById('canvas');
        var c = canvas.getContext('2d');

        function getClock(){
            
        c.clearRect(0,0,300,300);
        //获取时间
        var date = new Date();
        var h = date.getHours();
        var minu = date.getMinutes();
        var s = date.getSeconds();

        c.strokeStyle='#000'
        c.lineWidth=3
        //表盘
        c.beginPath()
        c.arc(150,150,140,0*Math.PI/180,360*Math.PI/180,true);
        c.stroke();
        c.closePath()
        //粗的刻度
        for(var i=1;i<=12;i++){
            c.save();
            c.translate(150,150);
		    c.rotate(i*30*Math.PI/180);
            c.beginPath()
            c.moveTo(0,-140);
            c.lineTo(0,-120);
            c.stroke();
            c.closePath()
            c.restore();
            
        }
        //短的刻度
        for(var i=1;i<=60;i++){
            c.save();
            c.translate(150,150);
		    c.rotate(i*6*Math.PI/180);
            c.beginPath()
            c.lineWidth=2;
            c.moveTo(0,-140);
            c.lineTo(0,-130);
            c.stroke();
            c.closePath()
            c.restore();
            
        }
        //时针
        c.save();
        c.translate(150,150);
        //加上当前分钟数的刻度
		c.rotate((h+(minu/60))*30*Math.PI/180);
        c.lineWidth=4;     
        c.beginPath()
        c.moveTo(0,-75);
        c.lineTo(0,20);
        c.stroke();
        c.restore();
        //分针
        c.save();
        c.translate(150,150);
		c.rotate(minu*6*Math.PI/180);
        c.lineWidth=3;  
        c.beginPath()
        c.moveTo(0,-95);
        c.lineTo(0,20);
        c.stroke();
        c.restore();
        //秒针
        c.save();
        c.translate(150,150);
		c.rotate(s*6*Math.PI/180);
        c.lineWidth=2;
        c.strokeStyle="red"
        c.beginPath()
        c.moveTo(0,-110);
        c.lineTo(0,20);
        c.stroke();
        c.restore();
    }
    getClock();
    setInterval('getClock()', 1000);
 </script>