canvas 初始化

train-web/canvas.md

@@ -0,0 +1,21 @@
+// 常用方法的使用
+
+```javascript
+// getContext('2d')：获取 2D 绘图上下文。它返回一个用于在 Canvas 上进行绘图操作的上下文对象。
+const canvas = document.getElementById('myCanvas');
+const ctx = canvas.getContext('2d');
+// beginPath()：开始一个新的路径。它用于定义一个路径，路径可以包含直线、曲线、弧线等。
+ctx.beginPath();
+// closePath()：闭合路径。它将当前路径的起点和终点连接起来，形成一个闭合的图形。
+ctx.closePath();
+// lineTo(x, y)：添加一条直线到指定的坐标点。它用于在路径中添加一个直线段。
+ctx.lineTo(100, 100);
+// rect(x, y, width, height)：创建一个矩形路径。它用于在路径中添加一个矩形。
+ctx.rect(50, 50, 100, 100);
+// arc(x, y, radius, startAngle, endAngle, anticlockwise)：创建一段圆弧路径。它用于在路径中添加一个圆弧。
+ctx.arc(100, 100, 50, 0, Math.PI \* 2, false);
+// moveTo(x, y)：将路径的起点移动到指定的坐标点。它用于在路径中移动当前位置，而不绘制任何线条。
+ctx.moveTo(50, 50);
+// stroke()：绘制路径的边框。它用于根据路径的定义绘制出路径的边框。
+ctx.stroke();
+```

train-web/src/pages/train/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="zh_cn">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div style="width: 100%; height: 500px; border: 1px solid">
+      <canvas id="trainCanvas" height="500px" width="1024px"></canvas>
+    </div>
+  </body>
+  <script>
+    // const canvas = this.$refs.myCanvas;
+    const canvas = document.getElementById("trainCanvas");
+    const ctx = canvas.getContext("2d");
+    // 背景色
+    ctx.fillStyle = "#F2F2F2";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.beginPath();
+    ctx.moveTo(100, 100);
+    ctx.lineTo(900, 100);
+    ctx.stroke();
+    ctx.closePath();
+
+    for (let i = 0; i < 12; i++) {}
+  </script>
+</html>

train-web/src/pages/train/index.vue

@@ -0,0 +1,6 @@
+<template>
+
+</template>
+<script setup lang="ts">
+
+</script>

train-web/src/pages/train/lock.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="zh_cn">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <canvas id="clockCanvas" width="400" height="400"></canvas>
+  </body>
+  <script>
+    // 获取 Canvas 元素和 2D 上下文
+    const canvas = document.getElementById("clockCanvas");
+    const ctx = canvas.getContext("2d");
+
+    // 获取 Canvas 的中心点坐标
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+
+    // 绘制时钟的外圆
+    function drawClockFace() {
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, 190, 0, Math.PI * 2);
+      ctx.lineWidth = 5;
+      ctx.strokeStyle = "#000";
+      ctx.stroke();
+      ctx.closePath();
+    }
+
+    // 绘制时钟的刻度
+    function drawClockTicks() {
+      for (let i = 0; i < 12; i++) {
+        const angle = (Math.PI / 6) * i;
+        const x1 = centerX + Math.sin(angle) * 160;
+        const y1 = centerY - Math.cos(angle) * 160;
+        const x2 = centerX + Math.sin(angle) * 180;
+        const y2 = centerY - Math.cos(angle) * 180;
+
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = "#000";
+        ctx.stroke();
+        ctx.closePath();
+      }
+    }
+
+    // 绘制时钟的指针
+    function drawClockHands() {
+      const now = new Date();
+      const hours = now.getHours();
+      const minutes = now.getMinutes();
+      const seconds = now.getSeconds();
+
+      // 绘制时针
+      const hourAngle = (Math.PI / 6) * (hours % 12) + (Math.PI / 360) * minutes;
+      const hourHandLength = 100;
+      const hourX = centerX + Math.sin(hourAngle) * hourHandLength;
+      const hourY = centerY - Math.cos(hourAngle) * hourHandLength;
+
+      ctx.beginPath();
+      ctx.moveTo(centerX, centerY);
+      ctx.lineTo(hourX, hourY);
+      ctx.lineWidth = 8;
+      ctx.strokeStyle = "#000";
+      ctx.stroke();
+      ctx.closePath();
+
+      // 绘制分针
+      const minuteAngle = (Math.PI / 30) * minutes + (Math.PI / 1800) * seconds;
+      const minuteHandLength = 140;
+      const minuteX = centerX + Math.sin(minuteAngle) * minuteHandLength;
+      const minuteY = centerY - Math.cos(minuteAngle) * minuteHandLength;
+
+      ctx.beginPath();
+      ctx.moveTo(centerX, centerY);
+      ctx.lineTo(minuteX, minuteY);
+      ctx.lineWidth = 5;
+      ctx.strokeStyle = "#000";
+      ctx.stroke();
+      ctx.closePath();
+
+      // 绘制秒针
+      const secondAngle = (Math.PI / 30) * seconds;
+      const secondHandLength = 160;
+      const secondX = centerX + Math.sin(secondAngle) * secondHandLength;
+      const secondY = centerY - Math.cos(secondAngle) * secondHandLength;
+
+      ctx.beginPath();
+      ctx.moveTo(centerX, centerY);
+      ctx.lineTo(secondX, secondY);
+      ctx.lineWidth = 2;
+      ctx.strokeStyle = "#f00";
+      ctx.stroke();
+      ctx.closePath();
+    }
+
+    // 绘制整个时钟
+    function drawClock() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      drawClockFace();
+      drawClockTicks();
+      drawClockHands();
+
+      requestAnimationFrame(drawClock);
+    }
+
+    // 开始绘制时钟
+    drawClock();
+  </script>
+</html>