Canvas繪製時鐘

一、時鐘外圓的繪製

      瞭解基本概念：   1度 = Math.PI/180;

      

        var canvas = document.getElementById('clock');
        var ctx = canvas.getContext('2d');
        var width = ctx.canvas.width;
        var height = ctx.canvas.height;
        var r = width/2;

        function drawBorder(){

                 //默認canvas的原點爲左上角，如今要將其移動到居中中心位置；使用canvas的API translate
                ctx.translate(r,r);

                //開始一條繪製或重置當前的路徑

                ctx.beginPath();

                //繪製線條寬度
               ctx.lineWidth = 4;
               //繪製圓，利用ctx.arc(x,y,r,startDeg,endDeg,direction); 注意： direction(可選)，規定應該是逆時針仍是順時針繪製；false = 順時針，true= 逆時針

                         

                     ctx.arc(0,0,r-2,0,2*Math.PI,false);

                    //繪製已定義路徑
                  ctx.stroke();                  

                 //繪製小時數(文本)
                 var hourArr = [3,4,5,6,7,8,9,10,11,12,1,2];
                 ctx.font = "18px Arial";
                 ctx.textAlign = "center";
                 ctx.textBaseline = 'middle';
                 hourArr.forEach(function(hour,i){
                           //求座標值
                            var rad = 2 * Math.PI/12 * i;
                             var x = Math.cos(rad) * (r-20);
                             var y = Math.sin(rad) * (r-20);
                            ctx.fillText(hour,x,y);
                  })

                  //繪製秒鐘的點圖形
                  for(var i=0;i<60;i++){
                          var rad = 2 * Math.PI/60 * i;
                          var x = Math.cos(rad) * (r -10);
                          var y = Math.sin(rad) * (r -10);
                          ctx.beginPath();
                          //爲了將對應小時數的點突出，加深顏色
                          if(i%5===0){
                                  ctx.fillStyle="#000";
                                  ctx.arc(x,y,3,0,2*Math.PI,false);
                           }else{
                                  ctx.fillStyle="#ccc";
                                  ctx.arc(x,y,2,0,2*Math.PI,false);
                            }
                            ctx.fill();
                    }

             }

             

            //繪製小時針(注意：小時針的變化受到分鐘的影響，因此旋轉要加上)
           function drawHourLine(hour,min){
                   //因爲小時，分鐘，秒都是從0開始的，防止旋轉影響該值需保存當前狀態；
                  ctx.save();
                 //從新繪製，要從新調用該函數
                  ctx.beginPath();
                  var rad = 2 * Math.PI/12 * hour;
                  var mrad = 2* Math.PI/12/60 * min;
                  ctx.rotate(rad + mrad);
                  ctx.lineCap = "round";
                  ctx.lineWidth = 4;
                  ctx.moveTo(0,10);
                  ctx.lineTo(0,-r/2);
                  ctx.stroke();
                  //恢復到旋轉以前的保存的狀態
                  ctx.restore();
          }

 

          //繪製分鐘針
           function drawMinLine(min){
                 ctx.save();
                 ctx.beginPath();
                 var rad = 2 * Math.PI/60 * min;
                 ctx.rotate(rad);
                 ctx.lineCap = "round";
                 ctx.lineWidth = 3;
                 ctx.moveTo(0,10);
                 ctx.lineTo(0,-r+28);
                 ctx.stroke();
                  //恢復到旋轉以前的保存的狀態
                 ctx.restore();
            }

 

            //繪製秒針
            function drawSecLine(sec){
                   ctx.save();
                   ctx.beginPath();
                   var rad = 2 * Math.PI/60 * sec;
                    ctx.rotate(rad);
                    ctx.fillStyle= "#FF0000";
                    ctx.moveTo(-2,20);
                    ctx.lineTo(2,20);
                    ctx.lineTo(1,-r + 30);
                    ctx.lineTo(-1,-r + 30);
                    ctx.fill();
                   //恢復到旋轉以前的保存的狀態
                   ctx.restore();
             }

 

              //繪製中心原點
             function drawDot(){
                    ctx.beginPath();
                    ctx.fillStyle="#fff";
                    ctx.arc(0,0,3,0,2*Math.PI,false);
                     ctx.fill();
               }

 

               function draw(){
                       //每次繪製前將當前區域清空
                       ctx.clearRect(0,0,width,height);
                       var date = new Date();
                       var hour = date.getHours();
                       var min = date.getMinutes();
                       var sec = date.getSeconds();
                       drawBorder();
                       drawHourLine(hour,min);
                       drawMinLine(min);
                       drawSecLine(sec);
                       drawDot();
                       //恢復到開始translate前的狀態；
                      ctx.restore();
                  }
                    draw();
                   setInterval(draw,1000);