1

我已经制作了 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>
4

1 回答 1

0

我不知道是否有在路径的转折点绘制点的特定功能，但为什么不自己在你想要的地方画圆呢？

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

于 2013-05-24T14:15:55.787 回答