canvas繪制時鐘

<!DOCTYPE html>

<html>

<head>

     <meta charset='utf-8'>

     <title>canvas繪制時鐘</title>

</head>

<body>

    <canvas id='canvas'  style="margin:0 auto;display:block;width:200px;height:200px;margin-top:30px;"></canvas>

</body>

<script type="text/javascript">

    var canvas = document.getElementById("canvas");

    var context = canvas.getContext('2d');   //創(chuàng)建context對象

    canvas.width = '200';

    canvas.height = '200';

    var  width = canvas.width;

    var height =canvas.height;

    var  r = width / 2;

    function drawBackground(){

        context.save(); 

        context.translate(r,r);

         context.beginPath();

         context.lineWidth = 10;

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

          context.stroke();     //圓形已畫完

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

        context.font = '18px Arial';

        context.textAlign = 'center';

       context.textBaseline = 'middle';

 numbers.forEach(function(num,i){

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

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

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

context.fillText(num , x , y );

});  //計算每個數(shù)字之間的角度x,y，用forEach()循環(huán)輸出數(shù)字,至此數(shù)字畫完。

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

           var rad = 2*Math.PI / 60 * i;       //一個點之間的弧度為2*Math.PI / 60

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

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

            context.beginPath();

//用if..else..來判斷然后分別畫上不同的顏色

            if(i % 5 == 0){   

                 context.fillStyle = "#000";

                 context.arc(x,y,2,0,2*Math.PI,false);

            }else{

                context.fillStyle = '#ccc';

                 context.arc(x,y,2,0,2*Math.PI,false);

            }

       context.fill();  

     }

  }          //至此分鐘上的60個點畫完了

//該函數(shù)用于繪制時針，注意在繪制前要先調(diào)用save()方法保存當(dāng)前狀態(tài)，繪制完成后調(diào)用restore()函數(shù)返回到之前的路徑狀態(tài)

function drawHour(hour,minute){

context.save();

context.beginPath();

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

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

context.rotate(rad+mrad);

context.lineWidth = 6;

context.lineCap = 'round';

context.moveTo(0,10);

context.lineTo( 0,-r / 2 );

context.stroke();

context.restore();

}

//該函數(shù)用于繪制分針

function drawMinute(minute){

  context.save();   //注意繪制分針之前先保存當(dāng)前的狀態(tài)，因為之后會調(diào)用rotate()函數(shù)旋轉(zhuǎn)畫布而改變之前的畫布狀態(tài)

  context.beginPath();

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

 context.rotate(rad);

context.lineWidth = 3;

context.lineCap = 'round';

context.moveTo (0,10);

context.lineTo(0,-r+25);

context.stroke();

context.restore();  //返回之前保存的路徑狀態(tài)

}

//該函數(shù)用于繪制秒針

function drawSecond(second){

context.save();

context.beginPath();

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

context.rotate(rad);

context.fillStyle = '#f12';

context.lineWidth = 2;

context.moveTo(-2,20);

context.lineTo(2,20);

context.lineTo(0,-r + 12);

context.lineTo(0,-r + 12);

context.fill();

context.restore();

}

//繪制時針分針秒針上面的一個點，覆蓋它們

function drawdot(){

context.beginPath();

context.fillStyle = '#fff';

context.arc(0,0,3,0,2*Math.PI,false);

context.fill();

}

function time_move(){

context.clearRect(0,0,width,height);  //清除畫布，從(0,0)點開始到(width,height)清除

var now = new Date();  //創(chuàng)建Date()函數(shù)

var hour = now.getHours();  //用getHours()方法獲取當(dāng)前的小時

var minute = now.getMinutes(); //用getMinutes()方法獲取當(dāng)前的分鐘

var second = now.getSeconds(); //用getSecongs()方法獲取當(dāng)前的秒數(shù)

drawBackground();

drawHour(hour,minute);

drawMinute(minute);

drawSecond(second);

drawdot();

context.restore();

}

time_move();

setInterval(time_move,1000);

</script>

</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容