javascript - Canvas -如何使线穿过点

This是我现在拥有的：



我想像this那样：



如您所见，蓝线穿过中心（400,400）。蓝线的起点不固定，它会根据用户输入的数据移动。

如何添加此蓝线并使其穿过中心？

对不起，我的英语不好，正在努力解决:)

Halfon

最佳答案

Use mathematics。

让中心坐标为(Cx, Cy)，在您的情况下为(400, 400)。让用户的坐标为(Ux, Uy)。

从(Ux, Uy)穿过中心的直线的方程式如下：

y - Cy = slope * (x - Cx)，其中slope = (Cy - Uy) / (Cx - Ux)。

现在，要将线从Ux绘制到某个x坐标（例如Px），只需使用等式来计算Py = Slope * (Px - Cx) + Cy，然后将线从(Ux, Uy)绘制到(Px, Py)。

context.beginPath();
context.moveTo(Ux, Uy);
context.lineTo(Px, Py);
context.stroke();

关于javascript - Canvas -如何使线穿过点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29282501/