1. 這里簡單了利用canvas做了一個(gè)時(shí)鐘侄非，樣式配的比較難看主要講了這么實(shí)現(xiàn)功能集體的細(xì)節(jié)根據(jù)自己的喜好來調(diào)試流译，請讀者諒解者疤，先看效果圖，

   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(){
    // 計(jì)算每一個(gè)刻度的弧度值
    var begScale=-Math.PI/2;//從12的位置為起始
    // 計(jì)算每一個(gè)的弧度線的弧度值
    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);
        // 刻度終點(diǎn)坐標(biāo)
        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);
        // 起點(diǎn)坐標(biāo)
        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();
        
        // 給定義個(gè)時(shí)間
        var date=new Date();
        // 計(jì)算出時(shí)分秒
        var hous=date.getHours()%12;
        var minutes=date.getMinutes();
        var seconds=date.getSeconds();
        console.log(seconds);
        // 計(jì)算指針的弧度值
        
        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>