canvas實現的鐘表效果程式碼例項

admin發表於2017-02-10
Canvas
本章節分享一段程式碼例項，它實現了獲取本地時間的鐘表效果。

感興趣的朋友可以可以做一下參考，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<title>模擬select</title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload=function(){
  var myCanvas = document.getElementById('myCanvas');
  var clock = myCanvas.getContext('2d');
  drawClock();
  setInterval(drawClock, 1000);
  function drawClock() {
    // 清理畫布
    clock.clearRect(0, 0, 400, 400);
    // 獲取系統時間的時、分、秒
    var nowDate = new Date();
    var sec = nowDate.getSeconds() > 9 ? nowDate.getSeconds() : '0' + nowDate.getSeconds();
    var mins = nowDate.getMinutes();
    var hours = nowDate.getHours();
    // 設定時間讀取位置
    clock.save();
    clock.translate(0, 300);
    clock.font = '16px 微軟雅黑';
    clock.textAlign = 'center';
    clock.fillText('當前系統時間為：' + hours + '時' + mins + '分' + sec + '秒', 200, 40);
    // clock.strokeText('當前系統時間為：'+hours+'時'+mins+'分'+sec+'秒',200,60);
    clock.restore();
    // 製作鐘盤
    clock.beginPath();
    clock.lineWidth = 8;
    clock.arc(200, 154, 150, 0, 2 * Math.PI, false);
    clock.stroke();
    // 製作時刻度
    for (var i = 12; i > 0; i--) {
      clock.save();
      clock.translate(200, 154);
      clock.rotate(i * 30 * Math.PI / 180);
      clock.lineWidth = 5;
      clock.beginPath();
      clock.moveTo(0, -146);
      clock.lineTo(0, -132);
      clock.stroke();
      clock.font = '14px Arial';
      clock.textAlign = 'center';
      clock.textBaseline = 'top';
      clock.fillText(i, 0, -132);
      clock.fill();
      clock.restore();
    }
    // 製作分刻度
    for (var i = 60; i > 0; i--) {
      clock.save();
      clock.translate(200, 154);
      clock.rotate(i * 6 * Math.PI / 180);
      clock.lineWidth = 3;
      clock.beginPath();
      clock.moveTo(0, -146);
      clock.lineTo(0, -140);
      clock.stroke();
      clock.restore();
    }
    // 製作時針
    clock.save();
    clock.translate(200, 154);
    clock.lineWidth = 5;
    clock.rotate((hours * 30 + mins * 6 / 12) * Math.PI / 180);
    clock.beginPath();
    clock.moveTo(0, -80);
    clock.lineTo(0, 20);
    clock.stroke();
    clock.restore();
    // 製作分針
    clock.save();
    clock.translate(200, 154);
    clock.lineWidth = 3;
    clock.rotate((mins * 6 + sec * 6 / 60) * Math.PI / 180);
    clock.beginPath();
    clock.moveTo(0, -100);
    clock.lineTo(0, 20);
    clock.stroke();
    clock.restore();
    // 製作秒針
    clock.save();
    clock.translate(200, 154);
    clock.lineWidth = 2;
    clock.strokeStyle = '#f00';
    clock.rotate(sec * 6 * Math.PI / 180);
    clock.beginPath();
    clock.moveTo(0, -110);
    clock.lineTo(0, 20);
    clock.stroke();
    // 製作秒針上的圓點
    clock.fillStyle = '#eee';
    clock.beginPath();
    clock.arc(0, 0, 6, 0, 2 * Math.PI, false);
    clock.fill();
    clock.stroke();
    clock.beginPath();
    clock.arc(0, -80, 6, 0, 2 * Math.PI, false);
    clock.fill();
    clock.stroke();
    clock.restore();
  }
}
</script>
</head>
<body>
<canvas width="400" height="400" id="myCanvas"></canvas>
</body>
</html>

相關文章