canvas實現的圓形時鐘效果

admin發表於2017-02-17
Canvas
分享一段程式碼例項，它實現了圓形時鐘效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<canvas id='box' width="500" height="500"></canvas>
<script>
var box = document.getElementById('box');
var cxt = box.getContext('2d');
 
// 時鐘動起來
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();
 
  // 畫時鐘刻度
  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();
  }
 
  // 畫時針
  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>

相關文章