話不多說,請(qǐng)看代碼:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas繪制表盤</title></head><body> <canvas id='box' width="500" height="500" > 您的瀏覽器不支持canvas </canvas> <script> var box = document.getElementById('box'); var cxt = box.getContext('2d'); // 時(shí)鐘動(dòng)起來 var timer = null; function clock(){  var date = new Date();  var h = date.getHours();  h = h + h/60;  h = h>12? h-12:h;  var m = date.getMinutes();  var s = date.getSeconds();  // 清畫布  cxt.clearRect(0,0,500,500);   // 畫表盤  cxt.strokeStyle = '#f0f';  cxt.lineWidth = 6;  cxt.beginPath();  cxt.arc(250,250,100,0,2*Math.PI);  cxt.stroke();  // 畫時(shí)鐘刻度  for(var i=0; i<12; i++){  cxt.save();  cxt.translate(250,250);  cxt.rotate(30*i*Math.PI/180);  cxt.lineWidth = 3;  cxt.beginPath();  cxt.moveTo(0,-80);  cxt.lineTo(0,-92);  cxt.stroke();  cxt.restore();  }  //畫分鐘刻度  for(var i=0; i<60; i++){  cxt.save();  cxt.translate(250,250);  cxt.rotate(6*i*Math.PI/180);  cxt.lineWidth = 2;  cxt.beginPath();  cxt.moveTo(0,-86);  cxt.lineTo(0,-92);  cxt.stroke();  cxt.restore();  }  // 畫時(shí)針  cxt.save();  cxt.lineWidth = 5;  cxt.translate(250,250);  cxt.rotate(h*30*Math.PI/180);  cxt.beginPath();  cxt.moveTo(0,6);  cxt.lineTo(0,-40);  cxt.stroke();  cxt.restore();  // 畫分針  cxt.save();  cxt.lineWidth = 3;  cxt.translate(250,250);  cxt.rotate(m*6*Math.PI/180);  cxt.beginPath();  cxt.moveTo(0,8);  cxt.lineTo(0,-60);  cxt.stroke();  cxt.restore();  // 畫秒針  cxt.save();  cxt.lineWidth = 1;  cxt.translate(250,250);  cxt.rotate(s*6*Math.PI/180);  cxt.beginPath();  cxt.moveTo(0,10);  cxt.lineTo(0,-75);  cxt.stroke();  cxt.restore();  // 畫中心的小圓固定三根針  cxt.save();  cxt.beginPath();  cxt.fillStyle = '#0f0';  cxt.lineWidth = 2;  cxt.translate(250,250);  cxt.arc(0,0,2,0,360,false);  cxt.stroke();  cxt.fill();  cxt.restore();  // 畫秒針上的園  cxt.save();  cxt.fillStyle = '#f00';  cxt.lineWidth = 2;  cxt.translate(250,250);  cxt.rotate(s*6*Math.PI/180);  cxt.beginPath();  cxt.arc(0,-60,2,0,360,false);  cxt.stroke();  cxt.fill();  cxt.restore(); } clock(); timer = setInterval(clock,1000); </script></body></html>以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持VeVb武林網(wǎng)!
新聞熱點(diǎn)
疑難解答