TARIN

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

@@ -11,6 +11,12 @@
     </div>
   </body>
   <script>
+    const LINE_UP_X = 100;
+    const LINE_UP_Y = 100;
+    const LINE_DOWN_X = LINE_UP_X;
+    const LINE_DOWN_Y = 300;
+    const signal_radius = 5;
+
     // const canvas = this.$refs.myCanvas;
     const canvas = document.getElementById("trainCanvas");
     const ctx = canvas.getContext("2d");
@@ -18,12 +24,58 @@
     ctx.fillStyle = "#F2F2F2";
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
+    // 绘制信号灯 里程 x 和 y 坐标
+    function drawSignal(x, y) {
+      // 里程标
+      ctx.beginPath();
+      ctx.moveTo(x, y + 5);
+      ctx.lineTo(x, y - 5);
+      ctx.strokeStyle = "#0000fF";
+      ctx.stroke();
+      ctx.closePath();
+      //
+      ctx.beginPath();
+      ctx.moveTo(x, y - 5);
+      ctx.lineTo(x, y - 15);
+      ctx.moveTo(x - 5, y - 10);
+      ctx.lineTo(x, y - 10);
+      ctx.strokeStyle = "#000000";
+      ctx.stroke();
+      // 圆
+      // ctx.beginPath();
+      ctx.arc(x - 10, y - 5 - signal_radius, signal_radius, 0, Math.PI * 2);
+      ctx.lineWidth = 0.5;
+      ctx.fillStyle = "red";
+      ctx.stroke();
+      ctx.fill();
+      ctx.closePath();
+    }
+
+    function drawTrack(line_y) {
+      ctx.beginPath();
+      ctx.moveTo(LINE_UP_X, line_y);
+      ctx.lineTo(900, line_y);
+      ctx.stroke();
+      ctx.closePath();
+      for (let i = 0; i < 10; i++) {
+        var item = LINE_UP_X + i * 50;
+        drawSignal(item, line_y);
+      }
+    }
     ctx.beginPath();
-    ctx.moveTo(100, 100);
-    ctx.lineTo(900, 100);
+    ctx.moveTo(LINE_UP_X + 50, LINE_UP_Y);
+    ctx.lineTo(LINE_DOWN_X + 150, LINE_DOWN_Y);
+    ctx.moveTo(LINE_UP_X + 150, LINE_UP_Y);
+    ctx.lineTo(LINE_DOWN_X + 50, LINE_DOWN_Y);
+
+    ctx.moveTo(LINE_UP_X + 700, LINE_UP_Y);
+    ctx.lineTo(LINE_DOWN_X + 800, LINE_DOWN_Y);
+    ctx.moveTo(LINE_UP_X + 800, LINE_UP_Y);
+    ctx.lineTo(LINE_DOWN_X + 700, LINE_DOWN_Y);
     ctx.stroke();
     ctx.closePath();
 
-    for (let i = 0; i < 12; i++) {}
+    drawTrack(LINE_UP_Y);
+    drawTrack(LINE_DOWN_Y);
   </script>
 </html>