canvas繪製鐘錶效果程式碼例項

admin發表於2017-02-13
Canvas
本章節分享一段程式碼例項，它利用canvas實現了繪製鐘錶的效果。

並且鐘錶能夠實時走動，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload = function() {
  var canvas = document.getElementById('canvas');
  canvas.width = 600;
  canvas.height = 600;
 
  var context = canvas.getContext('2d');
  context.lineWidth = 5;
  context.strokeStyle = '#666';
  context.beginPath();
  context.arc(300, 300, 200, 0, 2 * Math.PI);
  context.closePath();
 
  context.stroke();
 
  drawMark(300, 300, context, 200, 180);
  setInterval(function() {
    drawHand(300, 300, context, 100, 120, 140);
  }, 500);
}
 
function drawMark(x, y, cxt, r1, r2) {
  cxt.beginPath();
  for (var i = 0; i < 12; i++) {
    cxt.moveTo(x + r1 * Math.cos((i * 30) / 180 * Math.PI), y - r1 * Math.sin((i * 30) / 180 * Math.PI));
    cxt.lineTo(x + r2 * Math.cos((i * 30) / 180 * Math.PI), y - r2 * Math.sin((i * 30) / 180 * Math.PI));
  }
  cxt.closePath();
  cxt.strokeStyle = '#777';
  cxt.lineWidth = 3;
  cxt.stroke();
}
 
 
function drawHand(x, y, cxt, rh, rm, rs) {
 
  cxt.clearRect(160, 160, 280, 280);
  var now = new Date();
  var h = now.getHours() + now.getMinutes() / 60;
  var m = now.getMinutes();
  var s = now.getSeconds();
  cxt.beginPath();
  cxt.moveTo(300, 300);
  cxt.lineTo(300+rh * (Math.sin(h/24*720/180 * Math.PI)), 300-rh * (Math.cos(h / 24 * 720/180 * Math.PI)));
  cxt.moveTo(300, 300);
  cxt.lineTo(300+rm * (Math.sin(m/60*360/180 * Math.PI)), 300-rm * (Math.cos(m/60 * 360/180 * Math.PI)));
  cxt.moveTo(300, 300);
  cxt.lineTo(300 + rs * (Math.sin(s/60*360 / 180 * Math.PI)), 300-rs * (Math.cos(s / 60 * 360 / 180 * Math.PI)));
 
  cxt.closePath();
  cxt.strokeStyle = '#777';
  cxt.lineWidth = 3;
  cxt.stroke();
}
</script>
</head>
<body>
<canvas id='canvas' style='display:block;margin:50px auto'>
當前瀏覽器不支援canvas
</canvas>
</body>
</html>

相關文章