时钟效果

2022-04-23 01:15:21 +08:00
parent 76593f3fce
commit 69eabaa621
30 changed files with 31926 additions and 1 deletions
--- a/pointerClock/images/clock.gif
+++ b/pointerClock/images/clock.gif
--- a/pointerClock/index.html
+++ b/pointerClock/index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <Style>
+      #time-text {
+          position: absolute;
+          top: 10px;
+          left: 20px;
+      }
+
+      #canvas {
+          width: 450px;
+          height: 600px;
+      }
+  </Style>
+</head>
+<body>
+<p id="time-text"></p>
+<canvas id="canvas" width="600" height="800"></canvas>
+<script>
+  let canvas = document.getElementById('canvas');
+  let timeText = document.querySelector('#time-text');
+  let cxt = canvas.getContext('2d');
+  cxt.translate(300, 300);//初始移动轴
+  let timer;
+  let hour;
+  let min;
+  let sec;
+
+  function time_update() {
+    let date = new Date();
+    hour = date.getHours();
+    hour = hour > 12 ? hour - 12 : hour;
+    min = date.getMinutes();
+    sec = date.getSeconds();
+    timeText.innerHTML = date.toTimeString().slice(0, 8);
+    cxt.clearRect(-300, -300, 800, 600)//清除掉上次的渲染
+    //按照顺序渲染
+    hour_();
+    min_();
+    sec_();
+    pan();
+    timer = window.requestAnimationFrame(time_update);
+  }
+
+  time_update();//启动requestAnimationFrame（默认间隔约16.7毫秒，对于浏览器一般最顺畅的间隔
+  //console.log(hour,min,sec)
+  //window.cancelAnimationFrame(timer)
+
+  function pan() {//表盘
+    cxt.save();//旋转之前
+    //绘制小刻度
+    for (let i = 0; i < 60; i++) {
+      cxt.strokeStyle = '#afafaf';
+      //if(i%5==4)cxt.strokeStyle='#8a8a8a';
+      cxt.rotate(Math.PI / 30)
+      cxt.beginPath();
+      cxt.moveTo(185, 0)
+      cxt.lineTo(190, 0)
+      cxt.lineWidth = 3
+      cxt.stroke();
+      cxt.closePath();
+    }
+    cxt.restore();//恢复旋转之前，其实正好一圈没影响
+
+    //绘制大刻度
+    cxt.save();//旋转之前
+    for (let i = 0; i < 12; i++) {
+      cxt.rotate(Math.PI / 6)
+      cxt.beginPath();
+      cxt.moveTo(180, 0)
+      cxt.lineTo(195, 0)
+      cxt.lineWidth = 6
+      cxt.strokeStyle = '#8a8a8a';
+      cxt.stroke();
+      cxt.closePath();
+    }
+    cxt.restore();//恢复旋转之前，其实正好一圈没影响
+
+
+    //绘制外圆
+    cxt.beginPath()
+    cxt.arc(0, 0, 200, 0, 2 * Math.PI)
+    cxt.strokeStyle = '#8a8a8a'
+    cxt.lineWidth = 10
+    cxt.stroke();
+    cxt.closePath();
+
+    //绘制中心点
+    cxt.beginPath()
+    cxt.arc(0, 0, 5, 0, 2 * Math.PI)
+    cxt.strokeStyle = 'black'
+    cxt.lineWidth = 5
+    cxt.stroke();
+    cxt.fillStyle = 'white'
+    cxt.fill();
+    cxt.closePath();
+
+    cxt.restore();
+
+
+  }
+
+  function sec_() {
+    cxt.save();
+    //绘制秒针
+    cxt.rotate(sec * Math.PI / 30 - Math.PI / 2)
+    cxt.beginPath();
+    cxt.moveTo(-30, 0)
+    cxt.lineTo(160, 0)
+    cxt.lineWidth = 3
+    cxt.strokeStyle = '#6c6';
+    cxt.stroke();
+    cxt.closePath();
+    cxt.restore();
+  }
+
+  function min_() {
+    cxt.save();
+    //绘制分针
+    cxt.rotate(min * Math.PI / 30 - Math.PI / 2 + sec * Math.PI / 1800)
+    cxt.beginPath();
+    cxt.moveTo(-20, 0)
+    cxt.lineTo(130, 0)
+    cxt.lineWidth = 5
+    cxt.strokeStyle = '#264';
+    cxt.stroke();
+    cxt.closePath();
+    cxt.restore();
+  }
+
+  function hour_() {
+    cxt.save();
+    //绘制时针
+    cxt.rotate(hour * Math.PI / 6 - Math.PI / 2 + min * Math.PI / 360 + sec * 2 * Math.PI / 12 / 60 / 60)
+    cxt.beginPath();
+    cxt.moveTo(-10, 0)
+    cxt.lineTo(100, 0)
+    cxt.lineWidth = 8
+    cxt.strokeStyle = '#910';
+    cxt.stroke();
+    cxt.closePath();
+    cxt.restore();
+  }
+</script>
+</body>
+</html>