使用canvas繪製時鐘

window.onload= function (){

     var  clock=document.getElementById( "clock" ).getContext( '2d' ); //經過獲取canvas元素獲取2d上下文

     var  width=clock.canvas.width; //獲得畫布的寬度

     var  height=clock.canvas.height; //獲得花布的高度

     var  r=width/2; //獲得將要畫的時鐘的半徑

     var  prop=width/150; //在此保留比例，以便於在更換畫布大小時調節

     function  outline(){

         clock.save(); //保存當前狀態

         clock.translate(r,r); //將原點移動到(r,r)處

         clock.beginPath(); //每一個函數內部都要有beginPath()方法

         clock.lineWidth=3*prop; //經過lineWidth來設置劃線的寬度，注意這裏沒有單位

         clock.arc(0,0,r-clock.lineWidth/2,0,2*Math.PI, false );

         clock.stroke(); //繪製路徑

         var  scaleNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];

         clock.font=12*prop+ "px Arial" ; //經過font來設置字體的大小。關鍵：必定單位px，且後面必定要有字體樣式

         clock.textAlign= "center" ; //設置位水平居中

         clock.textBaseline= "middle" ; //設置位垂直居中

     <strong>    scaleNumbers.forEach( function (number,i){ //遍歷數組

             var  rad=2*Math.PI/12*i;

             var  x=Math.cos(rad)*(r-15*prop);

             var  y=Math.sin(rad)*(r-15*prop);

             clock.fillText(number,x,y); //在x y處繪製number

         });</strong>

         for ( var  i=0;i<=60;i++){

             var  rad=2*Math.PI/60*i;

             var  x=Math.cos(rad)*(r-7*prop);

             var  y=Math.sin(rad)*(r-7*prop);

             clock.beginPath();

             if (i%5===0){

                 clock.fillStyle= "red" ; //填充的顏色

                 clock.arc(x,y,1*prop,0,2*Math.PI, false );

             } else {

                 clock.fillStyle= "black" ;

                 clock.arc(x,y,1*prop,0,2*Math.PI, false );

             }

             clock.fill();

         }

     }

     function  hours(hour,minute){

         clock.save(); //必定要先保存

         clock.beginPath();

         var  rad=2*Math.PI/12*hour;

         var  minute_rad=2*Math.PI/12/60*minute;

         clock.rotate(rad+minute_rad);

         clock.strokeStyle= "blue" ;

         clock.lineCap= "round" ;

         clock.lineWidth=5*prop;

         clock.moveTo(0,2*prop);

         clock.lineTo(0,-r+40*prop);

         clock.stroke();

         clock.restore(); //恢復

     }

     function  minutes(minute){

         clock.save();

         clock.beginPath();

         clock.strokeStyle= "orange" ; //設置路徑的顏色

         clock.lineWidth=4*prop;

         clock.lineCap= "round" ; //設置線的樣式

         var  rad=2*Math.PI/60*minute;

         clock.rotate(rad); //旋轉畫布

         clock.moveTo(0,5*prop); //將「畫筆」移動到（這裏沒有繪畫）

         clock.lineTo(0,-r+25*prop);

         clock.stroke();

         clock.restore();

     }

     function  seconds(second){

         clock.save();

         clock.beginPath();

         clock.fillStyle= "red" ;

         var  rad=2*Math.PI/60*second;

         clock.rotate(rad);

         clock.moveTo(-2*prop,5*prop);

         clock.lineTo(2*prop,5*prop);

         clock.lineTo(1*prop,-r+18*prop);

         clock.lineTo(3*prop,-r+18*prop);

         clock.lineTo(0,-r+10*prop);

         clock.lineTo(-3*prop,-r+18*prop);

         clock.lineTo(-1*prop,-r+18*prop);

         clock.fill();

         clock.restore();

     }

     function  middle_dot(){

         clock.beginPath();

         clock.fillStyle= "white" ;

         clock.arc(0,0,5*prop,0,2*Math.PI, false );

         clock.fill();

     }

     function  all(){

         clock.clearRect(0,0,width,height);

         outline();

         middle_dot();

         var  now= new  Date(); //經過Date對象獲取時間

         var  hour=now.getHours(); //獲取當前小時數

         var  minute=now.getMinutes();

         var  second=now.getSeconds();

         hours(hour,minute);

         minutes(minute);

         seconds(second);

         clock.restore();

     }

     all();

     setInterval(all,1000); //使用定時器不斷更新時間

     

};