canvas钟表

function Clock(size){
        this.canvas = document.getElementById("canvas");
        this.size = size || 400;
        this.ctx = this.canvas.getContext("2d");
        this.penW = 5;
        this.fill="yellow";
        this.stroke="blue";
        this.init();
    }
    Clock.prototype = {
         init:function(){
             this.canvas.width = this.size;
             this.canvas.height = this.size;
             this.makePan();
             this.makeKedu();
             this.movea();
         },
         makePan:function(){
             this.ctx.save();
            this.ctx.beginPath();
            this.ctx.fillStyle=this.fill;
            this.ctx.strokeStyle = this.stroke;
            this.ctx.arc(this.size/2,this.size/2,this.size/2-this.penW,0,Math.PI*2)
            this.ctx.closePath();
            this.ctx.fill();
            this.ctx.stroke();
            this.ctx.restore();
         },
         makeKedu:function(){
             for(var i = 0 ; i < 60 ; i ++){
                 if(i%5 == 0){
                     this.ctx.save();
                    this.ctx.beginPath();
                    this.ctx.translate(this.size/2,this.size/2);
                    this.ctx.rotate(i*Math.PI/30);
                    this.ctx.moveTo(this.size/2-30,0);
                    this.ctx.lineTo(this.size/2-this.penW,0)
                    this.ctx.closePath();
                    this.ctx.stroke();
                    this.ctx.restore();
                 }else{
                     this.ctx.save();
                    this.ctx.beginPath();
                    this.ctx.translate(this.size/2,this.size/2);
                    this.ctx.rotate(i*Math.PI/30);
                    this.ctx.moveTo(this.size/2-20,0);
                    this.ctx.lineTo(this.size/2-this.penW,0)
                    this.ctx.closePath();
                    this.ctx.stroke();
                    this.ctx.restore();
                 }                 
             }            
         },
         movea:function(){
             this.move();
             var that = this;
             setInterval(function(){
                 that.move();
             })
         },
         move:function(){
               this.ctx.clearRect(0,0,this.size/2,this.size/2);
               this.makePan();
               this.makeKedu();
               var date = new Date();
               var p = Math.PI;
               var s = date.getSeconds();
               var m = date.getMinutes();
               var h = date.getHours();
               //sss
               this.ctx.save();
               this.ctx.beginPath();
               this.ctx.translate(this.size/2,this.size/2);
               this.ctx.rotate(s*p/30);
               this.ctx.strokeStyle ="blue";
               this.ctx.moveTo(0,0);
               this.ctx.lineTo(0,-this.size/2+40);
               this.ctx.closePath();
               this.ctx.stroke();
               this.ctx.restore();
               //mmm
               this.ctx.save();
               this.ctx.beginPath();
               this.ctx.translate(this.size/2,this.size/2);
               this.ctx.rotate((m*p/30)+(s*p/1800))
               this.ctx.moveTo(0,0);
               this.ctx.lineTo(0,-this.size/2+75);
               this.ctx.lineWidth = 2;
               this.strokeStyle="blue";
               this.ctx.closePath();
               this.ctx.stroke();
               this.ctx.restore();
               //hhh
               this.ctx.save();
               this.ctx.beginPath();
               this.ctx.translate(this.size/2,this.size/2);
               this.ctx.rotate((h*p/6)+(m*p/1800)+(s*p/21600))
               this.ctx.moveTo(0,0);
               this.ctx.lineTo(0,-this.size/2+75);
               this.ctx.lineWidth = 3;
               this.strokeStyle="blue";
               this.ctx.closePath();
               this.ctx.stroke();
               this.ctx.restore();
         }

    }