如何在 JavaScript Canvas 中绘制垂直于直线或曲线切线的矩形

How to draw a rectangle perpendicular to a line, or to the tangent of a curve, in JavaScript Canvas

我有一系列直线、曲线和弧线随机淹没在 HTML5 canvas 上。 线的左边有一个矩形，线向左滑动并在 y 轴上移动，它总是通过矩形的中间。问题是我希望矩形右侧的中间始终垂直于线，即使线弯曲时也是如此。 perpendicular rectangle

我怎样才能做到这一点？

谢谢

您需要计算直线的角度并将其设置为直角。看我项目里的review解决方案：

  delta_x = x2 - x1;
  delta_y = y2 - y1;
  angle = Math.atan2(delta_y, delta_x);

https://codepen.io/Luis4raujo/pen/gOLRqzq?editors=1111

现在，您需要调整矩形的 x 和 y 位置。