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

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

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

我怎样才能做到这一点？

谢谢

解决方法

您需要计算线的角度并将其设置为矩形。查看我项目中的审查解决方案：

  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 位置。