本文實例為大家分享了Canvas繪制動態時鐘效果展示的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #mycanvas{ position: absolute; left:50%; margin-left:-250px; border:5px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); background-color: rgb(58, 179, 255); } </style> </head> <body> <!-- canvas：html5新增的畫布對象，可以在其中繪制任何的圖形，以及線條效果，包括圖片 注意canvas的尺寸應該通過元素的屬性直接設置，而不是使用樣式實現(失幀) --> <canvas id="mycanvas" width="500px" height="500px">您的瀏覽器太low了,請切換</canvas> <script> //獲取畫布對象 var mycanvas = document.getElementById('mycanvas'); //獲取一個2d繪圖環境（拿到一支畫筆） var ctx = mycanvas.getContext('2d'); function draw(){ //獲取系統時間 var nowTime = new Date(); var hours = nowTime.getHours();//獲取時 var minutes = nowTime.getMinutes();//獲取分 var seconds = nowTime.getSeconds();//獲取秒 //防止小時超過12 hours = hours > 12 ? hours-12 : hours; //精準設置小時值 hours = hours + minutes/60; //清除畫布（防止覆蓋） ctx.clearRect(0,0,500,500); //初始化畫筆的樣式 ctx.lineWidth = 5; //設置線條的寬度 ctx.strokeStyle = '#fff'; //設置線條顏色 ctx.beginPath();//開始新的繪圖路徑 //設置一個圓形路徑 ctx.arc(250,250,150,0,360,false); //繪制圖形 ctx.stroke(); ctx.closePath();//結束當前繪圖路徑 //繪制刻度(時刻度) for(var i = 0;i < 12;i++){ ctx.beginPath(); ctx.lineWidth = 10; //保存當前繪圖環境 ctx.save(); //重置繪制起始位置(將圓心位置重置為0,0) ctx.translate(250,250); //旋轉畫布到一定的弧度 弧度=角度*PI/180 ctx.rotate(i * 30 * Math.PI / 180); //設置繪制線條的起始位置 ctx.moveTo(0,140); //設置線條的結束位置 ctx.lineTo(0,150); //繪制路徑 ctx.stroke(); //還原初始的繪圖環境 ctx.restore(); ctx.closePath(); } //繪制刻度(分刻度) for(var i = 0;i < 60;i++){ ctx.beginPath(); ctx.lineWidth = 3; //保存當前繪圖環境 ctx.save(); //重置繪制起始位置(將圓心位置重置為0,0) ctx.translate(250,250); //旋轉畫布到一定的弧度 弧度=角度*PI/180 ctx.rotate(i * 6 * Math.PI / 180); //設置繪制線條的起始位置 ctx.moveTo(0,142); //設置線條的結束位置 ctx.lineTo(0,146); //繪制路徑 ctx.stroke(); //還原初始的繪圖環境 ctx.restore(); ctx.closePath(); } /*繪制時針*/ ctx.beginPath(); ctx.lineWidth = 5; //保存當前繪圖環境 ctx.save(); //重置繪制起始位置(將圓心位置重置為0,0) ctx.translate(250,250); //旋轉畫布到一定的弧度 弧度=角度*PI/180 ctx.rotate(hours * 30 * Math.PI / 180); //設置繪制線條的起始位置 ctx.moveTo(0,10); //設置線條的結束位置 ctx.lineTo(0,-100); //繪制路徑 ctx.stroke(); //還原初始的繪圖環境 ctx.restore(); ctx.closePath(); /*繪制分針*/ ctx.beginPath(); ctx.lineWidth = 3; //保存當前繪圖環境 ctx.save(); //重置繪制起始位置(將圓心位置重置為0,0) ctx.translate(250,250); //旋轉畫布到一定的弧度 弧度=角度*PI/180 ctx.rotate(minutes * 6 * Math.PI / 180); //設置繪制線條的起始位置 ctx.moveTo(0,10); //設置線條的結束位置 ctx.lineTo(0,-120); //繪制路徑 ctx.stroke(); //還原初始的繪圖環境 ctx.restore(); ctx.closePath(); /*繪制秒針*/ ctx.beginPath(); ctx.lineWidth = 1; ctx.strokeStyle = '#f00'; //保存當前繪圖環境 ctx.save(); //重置繪制起始位置(將圓心位置重置為0,0) ctx.translate(250,250); //旋轉畫布到一定的弧度 弧度=角度*PI/180 ctx.rotate(seconds * 6 * Math.PI / 180); //設置繪制線條的起始位置 ctx.moveTo(0,10); //設置線條的結束位置 ctx.lineTo(0,-135); //繪制路徑 ctx.stroke(); //還原初始的繪圖環境 ctx.restore(); ctx.closePath(); } setInterval(draw,1000); </script> </body> </html> 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
