canvas制作钟表小案例

实现原理：canvas绘制圆的知识以及Date对象

window.onload=function (){
            var myCanvas=document.querySelector('#myCanvas');
            var cxt=myCanvas.getContext('2d');
            var timer=null;
            clearInterval(timer);
            //钟表函数
           function zhonbiao() {
               var x=200,y=200,r=150;
               //清除画布
               cxt.clearRect(0,0,myCanvas.width,myCanvas.height);
               //获取当前时间
               var day=new Date();
               var hour= day.getHours();
               var minute= day.getMinutes();
               var sec= day.getSeconds();
               var hourValue=(-90+hour*30+minute/2)*Math.PI/180;
               var minuteValue=(-90+minute*6)*Math.PI/180;
               var secValue=(-90+sec*6)*Math.PI/180;
               //秒针刻度
               cxt.beginPath();
               for(var i=0;i<60;i++){
                   cxt.moveTo(x,y);
                   cxt.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
                   cxt.stroke();
               }
               cxt.closePath();
               //绘制圆盖住一部分
               cxt.beginPath();
               cxt.fillStyle="#fff";
               cxt.moveTo(x,y);
               cxt.arc(x,y,r*19/20,0,Math.PI*2,false);
               cxt.fill();
               cxt.closePath();
               //制作重要刻度 30度
               cxt.beginPath();
               cxt.lineWidth=3;
               for(var i=0;i<12;i++){
                   cxt.moveTo(x,y);
                   cxt.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
                   cxt.stroke();
               }
               cxt.closePath();
               //绘制圆盖住一部分
               cxt.beginPath();
               cxt.fillStyle="#fff";
               cxt.moveTo(x,y);
               cxt.arc(x,y,r*18/20,0,Math.PI*2,false);
               cxt.fill();
               cxt.closePath();
                //绘制时针
               cxt.beginPath();
               cxt.lineWidth=5;
               cxt.moveTo(x,y);
               cxt.arc(x,y,r*10/20,hourValue,hourValue,false);
               cxt.closePath();
               cxt.stroke()

               //绘制分针
               cxt.beginPath();
               cxt.lineWidth=3;
               cxt.moveTo(x,y);
               cxt.arc(x,y,r*14/20,minuteValue,minuteValue,false);
               cxt.closePath();
               cxt.stroke()

               //绘制秒针
               cxt.beginPath();
               cxt.lineWidth=1;
               cxt.moveTo(x,y);
               cxt.arc(x,y,r*17/20,secValue,secValue,false);
               cxt.closePath();
               cxt.stroke()
           }
           timer= setInterval(zhonbiao,1000);
            zhonbiao();

        }
    </script>