HTML5画布向画布线条添加点/圆-我可以将线条和圆组合到'；把这些点连起来'；？

我已经用“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>

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
//属性
context.lineWidth=2；
context.lineJoin='round'；
//左线
context.beginPath（）；
上下文。moveTo（10,20）；
lineTo（149,50）；
lineTo（50100）；
lineTo（149150）；
lineTo（109200）；
context.strokeStyle=“红色”；
stroke（）；
//右行
context.beginPath（）；
上下文。moveTo（10,20）；
lineTo（109,50）；
lineTo（60110）；
lineTo（109150）；
lineTo（85200）；
context.strokeStyle=“蓝色”；
stroke（）；

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

---

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

您好，谢谢您回来-检查了您添加的链接，但奇怪的是，这并没有删除圆圈。我知道这应该是小菜一碟，而且我已经尝试过这类东西了，所以我想我一定是放弃了语法或者其他明显的东西。稍后会再打。干杯的时候，我做了一堆修补工作，我还在做，谢谢！我必须做点：context.stroke（）；否则，当有3个或更多个点时，他们会完成一个形状，并用颜色遮挡空间——基本上，他们会在每3个点之间形成三角形<代码>上下文.beginPath（）；弧（10,20，半径，0,2*Math.PI，false）；弧（149，50，半径，0，2*Math.PI，false）；弧（50,100，半径，0,2*Math.PI，false）；context.fillStyle='red'；stroke（）刚刚发现了另一种解决“三角形”问题的技术，它使用beginPath/closePath。下面是一个示例：

var ctx=document.getElementsByTagName（'canvas'）[0].getContext（'2d'）；ctx.beginPath（）；ctx.fillStyle=“蓝色”；弧（50，20，半径，0，数学π*2，真）；ctx.fill（）；ctx.closePath（）在此处找到最后一个解决方案：