javascript - Canvas - 如何让线穿过一个点

Question

This是我现在拥有的:

我想让它像this :

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

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

抱歉我的英语不好，正在努力:)

半场

Answer 1

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();