HTML5 画布在画布线上添加点/圆圈 - 我可以将线条和圆圈组合起来“加入点”吗？

Question

我已经制作了 2 条带有“lineTo”的线路径，它们在各个点改变方向 - 这些都绘制得很好。这些线条由画布呈现，而不是 svg。

我需要在它们改变方向的线上的点处添加圆圈，即在 lineTo 点，例如：context.lineTo(149, 50)。这看起来像连接点。

我不知道如何将这些点添加到线条中，或者是否可以 - 任何人都可以建议吗？

提前致谢。标记见下文：

<div class="wrapper">
      <canvas id="myCanvas" width="300" height="300"></canvas>
</div>
<script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      // attributes
      context.lineWidth = 2;
      context.lineJoin = 'round';

      // left line
      context.beginPath();
      context.moveTo(10, 20);
      context.lineTo(149, 50);
      context.lineTo(50, 100);
      context.lineTo(149, 150);
      context.lineTo(109, 200);     
      context.strokeStyle = "red";
      context.stroke();

      // right line
      context.beginPath();
      context.moveTo(10, 20);
      context.lineTo(109, 50);
      context.lineTo(60, 110);
      context.lineTo(109, 150);
      context.lineTo(85, 200);
      context.strokeStyle = "blue";
      context.stroke();
    </script>

Answer 1

不知道有没有专门的功能可以在路径的转折点画圆点，但是为什么不自己在想要的地方画圆呢？

您可以使用 arc() 方法在方向变化点上简单地画圆（here 很好解释）。正如您已经知道 lineTo() 点的坐标，这应该是小菜一碟；）