Javascript 在HTML5画布中绘制箭头曲线

我试图画下面的3个箭头。我可以正确绘制顶部的箭头，但无法正确绘制其他2个箭头。我正在使用HTML5画布绘制这些箭头

问题发生在我的arcTo调用中。由于某种原因，我无法得到正确的曲线。也许我应该用贝塞尔曲线有人能告诉我我使用什么HTML5/Javascript函数来生成上述箭头吗？

您能提供一个如何实现上述箭头的示例吗？

下面是一个JSFIDLE来说明哪里出了问题：

---

所以我们得到了一个箭头路径。我对它进行了注释：

dc.moveTo(p1.x, p1.y);
dc.lineTo(p2.x, p2.y); // end of main block
dc.lineTo(p3.x, p3.y); // topmost point     
dc.lineTo(p4.x, p4.y); // endpoint 
dc.lineTo(p5.x, p5.y); // bottommost point 
dc.lineTo(p6.x, p6.y); // end at bottom point 
dc.lineTo(p7.x, p7.y);

我们真的希望尽可能地保持它的相似性，除了我们希望以不同于直线的方式到达端点（并返回）。除了第一个命令外，我们绝对不想使用任何

moveTo

命令。这会让事情变得很混乱，让人很难理解。我还避免使用arcTo，除非您真的需要一部分圆弧（比如饼图），因为它与其他路径命令相比相当混乱

因此，我们将使用二次曲线，它类似于贝塞尔曲线，但只有一个控制点，使它们非常简单。它们通过指定控制点来工作，如

因此，我们采用相同的精确箭头代码，插入两个二次贝塞尔曲线来制作一个细箭头。我们希望控制点位于箭头质量的“内部”，以使二次曲线向内弯曲：

dc.moveTo(p1.x, p1.y);
dc.lineTo(p2.x, p2.y); // end of main block
dc.lineTo(p3.x, p3.y); // topmost point
// control point is based on p3 (topmost point)
dc.quadraticCurveTo(p3.x + 20, p3.y + 30, p4.x, p4.y); // endpoint 
// control point is based on p5 (bottommost point)
dc.quadraticCurveTo(p5.x + 20, p5.y - 30, p5.x, p5.y); // bottommost point 
dc.lineTo(p6.x, p6.y); // end at bottom point 
dc.lineTo(p7.x, p7.y);

或者是胖点，我们将控制点放置在与最上面和最下面的点相同的高度，以及与端点相同的X附近：

dc.beginPath();
// Draw arrow without curves
dc.moveTo(p1.x, p1.y);
dc.lineTo(p2.x, p2.y); // end of main block
dc.lineTo(p3.x, p3.y); // topmost point
// control point is based on p3 (topmost point)
dc.quadraticCurveTo(p3.x + 120, p3.y, p4.x, p4.y); // endpoint 
// control point is based on p5 (bottommost point)
dc.quadraticCurveTo(p5.x + 120, p5.y, p5.x, p5.y); // bottommost point 
dc.lineTo(p6.x, p6.y); // end at bottom point 
dc.lineTo(p7.x, p7.y);

---

现场示例：

您能提供一个预期的示例（图像）吗results@rkmax我已经发布了一个JSFIDLE来演示我的尝试，箭头太深了

dc.beginPath();
// Draw arrow without curves
dc.moveTo(p1.x, p1.y);
dc.lineTo(p2.x, p2.y); // end of main block
dc.lineTo(p3.x, p3.y); // topmost point
// control point is based on p3 (topmost point)
dc.quadraticCurveTo(p3.x + 120, p3.y, p4.x, p4.y); // endpoint 
// control point is based on p5 (bottommost point)
dc.quadraticCurveTo(p5.x + 120, p5.y, p5.x, p5.y); // bottommost point 
dc.lineTo(p6.x, p6.y); // end at bottom point 
dc.lineTo(p7.x, p7.y);