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

Question

我有一系列的线条，曲线和弧线随机淹没在HTML5画布上。在这条线的左边有一个矩形，这条线向左滑动，在y轴上移动，它总是通过矩形的中间。问题是，我希望矩形右边的中间始终垂直于直线，即使直线是弯曲的。垂直的矩形

我怎么才能做到呢?

感谢

Answer 1

你需要计算线的角度并将其设置为直角，看看我项目中的复习方案:

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

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

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