canvas實現的圓形走動鐘錶效果

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

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#canvas1 {
  margin: 0 auto;
  display: block;
  box-shadow: 5px 5px 5px gainsboro;
}
</style>
</head>
<body>
<canvas id="canvas1" width="650" height="650"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
//通過平移和旋轉改變畫筆的原始位置和x軸y軸的方向
ctx.translate(300, 300);
ctx.rotate(-Math.PI / 2); //逆時針旋轉90度
//繪製錶盤
function drawDial() {
  //外層圓
  ctx.beginPath();
  ctx.arc(0, 0, 300, 0, Math.PI * 2, false);
  ctx.fillStyle = 'lightskyblue';
  ctx.fill();
  //內層圓
  ctx.beginPath();
  ctx.arc(0, 0, 280, 0, Math.PI * 2, false);
  ctx.fillStyle = 'beige';
  ctx.fill();
}
//繪製刻度  時刻和分刻
function drawScale() {
  for (var i = 0; i < 60; i++) {
    if (i % 5 == 0) {
      //繪製時刻  整點
      ctx.beginPath();
      ctx.moveTo(240, 0);
      ctx.lineTo(270, 0);
      ctx.lineWidth = 10;
      ctx.strokeStyle = 'black';
      ctx.stroke();
    } else {
      //繪製分刻  非整點
      ctx.beginPath();
      ctx.moveTo(250, 0);
      ctx.lineTo(270, 0);
      ctx.lineWidth = 5;
      ctx.strokeStyle = 'gray';
      ctx.stroke();
    }
    //旋轉6度
    ctx.rotate(Math.PI / 180 * 6)
  }
}
//繪製時針,分針,秒針
function drawTime() {
  //獲取當前的系統時間
  var time = new Date();
  var hour = time.getHours();
  var minute = time.getMinutes();
  var second = time.getSeconds();
  //呼叫save函式,儲存當前的繪製狀態
  ctx.save();
  //旋轉角度(座標軸)
  ctx.rotate(Math.PI / 180 * 30 * hour + Math.PI / 180 * minute * 60 * 30)
    //繪製時針
  ctx.beginPath();
  ctx.moveTo(-20, 0);
  ctx.lineTo(160, 0);
  ctx.lineWidth = 13;
  ctx.strokeStyle = 'black';
  ctx.stroke();
  ctx.restore();
  //分針
  ctx.save();
  ctx.rotate(Math.PI / 180 * 6 * minute + Math.PI / 180 * second / 60 * 6);
  //繪製分針
  ctx.beginPath();
  ctx.moveTo(-30, 0);
  ctx.lineTo(210, 0);
  ctx.lineWidth = 8;
  ctx.strokeStyle = 'black';
  ctx.stroke();
  ctx.restore();
  //秒針
  ctx.save();
  ctx.rotate(Math.PI / 180 * 6 * second);
  //繪製秒針
  ctx.beginPath();
  ctx.moveTo(-40, 0);
  ctx.lineTo(250, 0);
  ctx.lineWidth = 3;
  ctx.strokeStyle = 'red';
  ctx.stroke();
  ctx.restore();
  ctx.beginPath();
  ctx.arc(0, 0, 15, 0, Math.PI * 2, false);
  ctx.fillStyle = 'rgba(192,192,192,0.9)';
  ctx.fill();
}
 
//繪製鐘錶
function drawClock() {
  drawDial();
  drawScale();
  drawTime();
  //重新整理頻率,重新呼叫
  window.requestAnimationFrame(drawClock);
}
drawClock();
</script>
</html>

相關文章