js Canvas繪制圓形時鐘教程

2019-11-19 17:42:30

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了Canvas繪制圓形時鐘的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html> <html> <head lang="en">   <meta charset="UTF-8">   <title>canvas-clock</title> </head> <body>   <canvas id="canvas" width="500px" height="500px">     你的瀏覽器不支持該元素！趕緊下載最新版本瀏覽器或使用其他瀏覽器！   </canvas>   <script>     //獲取到canvas元素     var canvas = document.getElementById('canvas');     //獲取canvas中的畫圖環境     var context = canvas.getContext('2d');       //時鐘的大小     function drowClock(){       //鐘表的大小：初始值設置       var clockDimensions = 150;        //清理當前畫布，以便后期繪制       context.clearRect(0,0,canvas.width,canvas.height);       //繪制表盤       context.beginPath(); //開啟新路徑       context.lineWidth = clockDimensions/15;       context.strokeStyle = "#A7C0DC";       //繪制表盤圓圈       context.arc(canvas.width/2,canvas.height/2,clockDimensions,0,Math.PI*2,false);       context.stroke();//描邊繪制        //繪制表盤的刻度線       for(var i=1;i<=60;i++){         if(i%5==0){           context.save();//保存當前繪制環境           context.beginPath();           context.lineWidth =clockDimensions/30;           context.strokeStyle = "#9AABB1";           //重置坐標原點（0,0）           context.translate(canvas.width/2,canvas.height/2);           //繪制環境旋轉方法,以（0,0）為參考點進行旋轉           context.rotate(Math.PI*2/60 * i);           context.moveTo(0,clockDimensions-clockDimensions/30);           context.lineTo(0,clockDimensions-clockDimensions/8);           context.stroke();           context.beginPath();           context.textAlign = 'center';           context.textBaseline = 'middle';           context.font = 'bold '+Math.floor(clockDimensions/10)+'px 宋體';           context.fillStyle = "#03671F";           context.fillText(i/5,0,0-(clockDimensions-clockDimensions/5));           context.fill();           context.restore();//恢復當前保存的繪制環境         }else {           context.save();           context.beginPath();           context.lineWidth = Math.floor(clockDimensions/100);           context.strokeStyle = "#8EA5AB";           //重置坐標原點（0,0）           context.translate(canvas.width / 2, canvas.height / 2);           //繪制環境旋轉方法,以（0,0）為參考點進行旋轉           context.rotate(Math.PI * 2 / 60 * i);           context.moveTo(0, clockDimensions-clockDimensions/20);           context.lineTo(0, clockDimensions-clockDimensions/10);           context.stroke();           context.restore();         }       }        //獲取當前windows的時間       var now = new Date();       var sec = now.getSeconds();       var min = now.getMinutes();       var hour = now.getHours();        //獲取精準的小時數       hour = hour +min/60 + sec/3600;       //轉換為12進制       hour = hour>12?(hour-12):hour;       //獲取精準的分鐘數       min = min + sec/60;        //繪制時針       context.save();       context.beginPath();       context.lineWidth = clockDimensions/30;       context.strokeStyle = "#596C74";       //重置坐標原點（0,0）       context.translate(canvas.width / 2, canvas.height / 2);       //繪制環境旋轉方法,以（0,0）為參考點進行旋轉       context.rotate(Math.PI * 2 / 12 * hour);       context.moveTo(0, clockDimensions/10);       context.lineTo(0, 0-clockDimensions/2);       context.stroke();       context.restore();        //繪制分針       context.save();       context.beginPath();       context.lineWidth = clockDimensions/40;       context.strokeStyle = "#596C74";       //重置坐標原點（0,0）       context.translate(canvas.width / 2, canvas.height / 2);       //繪制環境旋轉方法,以（0,0）為參考點進行旋轉       context.rotate(Math.PI * 2 / 60 * min);       context.moveTo(0, clockDimensions/8);       context.lineTo(0, 0-(clockDimensions-clockDimensions/5));       context.stroke();       context.restore();        //繪制秒針       context.save();       //重置坐標原點（0,0）       context.translate(canvas.width / 2, canvas.height / 2);       context.beginPath();       context.lineWidth = clockDimensions/50;       context.strokeStyle = "#738B93";       //繪制環境旋轉方法,以（0,0）為參考點進行旋轉       context.rotate(Math.PI * 2 / 60 * sec);       context.moveTo(0, clockDimensions/6);       context.lineTo(0, 0-(clockDimensions-clockDimensions/10));       context.stroke();       //修飾秒針       context.beginPath();       context.arc(0,0-(clockDimensions-clockDimensions/3),clockDimensions/20,0,Math.PI*2,true);       context.fillStyle = "#2FFC14";       context.fill();       context.lineWidth = clockDimensions/50;       context.stroke();       //修飾圓心       context.beginPath();       context.fillStyle = "#738B93";       context.arc(0,0,clockDimensions/20,0,Math.PI*2,true);       context.fill();       context.restore();     }     drowClock();     setInterval(drowClock,1000);    </script> </body> </html>

效果圖：