canvas绘制时钟

1. 这里简单了利用canvas做了一个时钟，样式配的比较难看主要讲了这么实现功能集体的细节根据自己的喜好来调试，请读者谅解，先看效果图， clock.png

2. 请看代码：

   html代码： <canvas id="canvas"></canvas>

JS代码：

<script>
var canvas=document.querySelector("canvas");
canvas.width=800;
canvas.height=600;
var ctx=canvas.getContext("2d");
function Clock(opt){
for(var key in opt){
this[key]=opt[key];
}
this.line();
}
Clock.prototype={

    line:function(){
        // ctx.clearRect(0,0,canvas.width,canvas.height);
        var self=this;
       var time=setInterval(function(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        self.bigCircle();
        self. drawTicks();
        self.drwPoints();
         ctx.save();
        ctx.font="20px 微软雅黑";
        ctx.restore();
       },1000)
    }, 
    // 大圆
    bigCircle:function(){
        ctx.beginPath();
        ctx.save();
        ctx.lineWidth=this. bigLine;
        ctx.strokeStyle=this. bigColor;
        ctx.arc(this.bigX,this.bigY,this.bigR,0,2*Math.PI);
        ctx.stroke();
        ctx.restore();
    },
    // 刻度
    drawTicks:function(){
    // 计算每一个刻度的弧度值
    var begScale=-Math.PI/2;//从12的位置为起始
    // 计算每一个的弧度线的弧度值
    var singleRadian=2*Math.PI/60;
    for(var i=0;i<60;i++){
        var length;
        var width;
        if(i%5==0){
            length=this.tick.bigLeng;
            width=this.tick.bigWidth;
        }else{
            length=this.tick.smallLeng;
            width=this.tick.smallWidth;
        }
        var radian=begScale+singleRadian*i;
        var h1=(this.bigR-this.bigLine/2)*Math.sin(radian);
        var b1=(this.bigR-this.bigLine/2)*Math.cos(radian);
        // 刻度终点坐标
        var y1=this.bigY+h1;
        var x1=this.bigX+b1;
        var h2=(this.bigR-this.bigLine/2-length)*Math.sin(radian);
        var b2=(this.bigR-this.bigLine/2-length)*Math.cos(radian);
        // 起点坐标
        var x2=this.bigX+b2;
        var y2=this.bigY+h2;
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2,y2);
        ctx.lineWidth= width;
        ctx.stroke();
       ctx.restore();
    }
    
    },
    // 每一条指针
    drwPoints:function(){
        ctx.beginPath();
        
        // 给定义个时间
        var date=new Date();
        // 计算出时分秒
        var hous=date.getHours()%12;
        var minutes=date.getMinutes();
        var seconds=date.getSeconds();
        console.log(seconds);
        // 计算指针的弧度值
        
        var hourR=hous*2*Math.PI/12-Math.PI/2;
        var minutesR=minutes*2*Math.PI/60-Math.PI/2;
        var secondsR=seconds*2*Math.PI/60-Math.PI/2;
        // 每一条的指针的长度
        // ctx.beginPath();
       
        this.drawPointer(30,hourR,8);
        this.drawPointer(50,minutesR,5);
        this.drawPointer(60,secondsR,3);
    },
    //指针的长度
    drawPointer:function(length,radian,lineWidth){
        var h=length*Math.sin(radian);
        console.log(h)
        var b=length*Math.cos(radian);
        var x=this.bigX+b;
        var y=this.bigY+h;
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(this.bigX,this.bigY);
        ctx.lineTo(x,y);
        ctx.lineWidth=lineWidth;
        ctx.stroke();
        ctx.restore();
    }
  }
    new Clock({
        bigX:300,
        bigY:300,
        bigR:150,
        bigColor:"palegreen",
        bigLine:10,
        tick:{
            bigLeng:15,
            bigWidth:10,
            smallLeng:10,
            smallWidth:4
        }
    });
</script>