canvas绘制时钟

src/modules/page6/element/CanvasStudyCopy1.vue

+<!--
+ * canvas学习-正弦曲线
+  -->
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const transX = ref(-900);
+const transY = ref(0);
+onMounted(() => {
+  sineCurve();
+});
+
+// 正弦曲线
+function sineCurve() {
+  let canvas: any = document.getElementById('canvas');
+  let pen = canvas.getContext('2d');
+
+  let canvas2: any = document.getElementById('canvas2');
+  let pen2 = canvas2.getContext('2d');
+
+  pen2.save();
+  pen2.beginPath();
+  pen2.beginPath();
+  // drawGrid('green', 1200, 600, pen2);
+  pen2.restore();
+
+  // const width = 600; // canvas宽
+  // const angle = 30; // 角度值
+  // const arc = (angle * Math.PI) / 180; // 弧度值
+  // 中心点坐标
+  // const center = {
+  //   x: 300,
+  //   y: 300,
+  // };
+
+  // 绘制网格
+  function drawGrid(color: string, w: number, h: number, pen: any) {
+    const step = 100;
+    const w_l = w / step;
+    const h_l = h / step;
+
+    // 横着的线
+    for (let i = 0; i <= h_l; i++) {
+      pen.beginPath();
+      pen.strokeStyle = color;
+      pen.moveTo(0, i * step);
+      pen.lineTo(w, i * step);
+      pen.stroke();
+    }
+    // 竖着的线
+    for (let i = 0; i <= w_l; i++) {
+      pen.beginPath();
+      pen.moveTo(i * step, 0);
+      pen.lineTo(i * step, h);
+      pen.stroke();
+    }
+  }
+  pen.save();
+  drawGrid('#ca3e47', 1200, 600, pen);
+  pen.restore();
+
+  // 正弦曲线
+  // 圆心坐标
+  const center = {
+    x: 100,
+    y: 300,
+  };
+  const r = 100; // 半径
+  pen.save();
+  pen.beginPath();
+  pen.arc(center.x, center.y, r, 0, 2 * Math.PI);
+  pen.strokeStyle = '#ffb549';
+  pen.stroke();
+  // 指示线
+  pen.beginPath();
+  pen.moveTo(center.x, center.y);
+  pen.lineTo(2 * r, center.y);
+  pen.lineWidth = 2;
+  pen.stroke();
+  pen.restore();
+
+  // 画圆弧
+  function drawArc(arc: number) {
+    pen.save();
+    pen.beginPath();
+    const a_side1 = Math.sin(arc) * r;
+    const b_side1 = Math.cos(arc) * r;
+    const x1 = center.x + b_side1;
+    const y1 = center.y + a_side1;
+    pen.restore();
+
+    pen.save();
+    pen.beginPath();
+    pen.moveTo(x1, y1);
+    pen.lineTo(300, y1);
+    pen.strokeStyle = 'blue';
+    pen.stroke();
+    pen.restore();
+
+    // 正弦点
+    pen2.beginPath();
+    pen2.arc(300 - transX.value, y1, 10, 0, 2 * Math.PI);
+    pen2.stroke();
+
+    // 移动
+    transX.value += 10;
+
+    // 能够显示的区域长度
+    const zoneLenth = 200;
+    // (0-900)是初始的transX.value
+    const sideP = 0 - 900 + zoneLenth;
+    if (transX.value > sideP) {
+      const lens1 = transX.value - sideP;
+      // 1200是pen2画布的宽度
+      const clearX = 1200 - lens1;
+      // 600是pen2画布的高度
+      pen2.clearRect(clearX, 0, lens1, 600);
+    }
+
+    return {
+      x: x1,
+      y: y1,
+    };
+  }
+
+  // let i = 24;
+  // setInterval(() => {
+  //   if (i < 0) {
+  //     i = 23;
+  //   }
+  //   drawArc((i * 15 * Math.PI) / 180);
+  //   i--;
+  //   if (transX.value > 300) {
+  //     transX.value = 0;
+  //     pen2.clearRect(0, 0, 1200, 600);
+  //   }
+  // }, 1000);
+
+  drawArc((360 * Math.PI) / 180);
+  drawArc((345 * Math.PI) / 180);
+  drawArc((330 * Math.PI) / 180);
+  drawArc((315 * Math.PI) / 180);
+  drawArc((300 * Math.PI) / 180);
+  // drawArc((285 * Math.PI) / 180);
+  // drawArc((270 * Math.PI) / 180);
+  // drawArc((255 * Math.PI) / 180);
+  // drawArc((240 * Math.PI) / 180);
+  // drawArc((225 * Math.PI) / 180);
+  // drawArc((210 * Math.PI) / 180);
+  // drawArc((195 * Math.PI) / 180);
+  // drawArc((180 * Math.PI) / 180);
+  // drawArc((165 * Math.PI) / 180);
+  // drawArc((150 * Math.PI) / 180);
+  // drawArc((135 * Math.PI) / 180);
+  // drawArc((120 * Math.PI) / 180);
+  // drawArc((105 * Math.PI) / 180);
+  // drawArc((90 * Math.PI) / 180);
+  // drawArc((75 * Math.PI) / 180);
+  // drawArc((60 * Math.PI) / 180);
+  // drawArc((45 * Math.PI) / 180);
+  // drawArc((30 * Math.PI) / 180);
+  // drawArc((15 * Math.PI) / 180);
+  // drawArc((0 * Math.PI) / 180);
+
+  // drawArc((345 * Math.PI) / 180);
+  // drawArc((330 * Math.PI) / 180);
+  // drawArc((315 * Math.PI) / 180);
+  // drawArc((300 * Math.PI) / 180);
+  // drawArc((285 * Math.PI) / 180);
+}
+</script>
+<template>
+  <div class="fit">
+    <div>canvas</div>
+
+    <div class="relative-position">
+      <canvas
+        id="canvas"
+        width="1200"
+        height="600"
+        style="border: 1px solid red; position: absolute; top: 0; left: 0"
+      ></canvas>
+      <canvas
+        id="canvas2"
+        width="1200"
+        height="600"
+        :style="{
+          border: '1px solid green',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          transform: `translate(${transX}px, ${transY}px)`,
+        }"
+      ></canvas>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.box {
+  transform: translate(100px, 100px);
+}
+</style>