画布 - 如何使线穿过一个点

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

Answer 2

简单地画线穿过中心点并延长其长度。由于你没有提供任何代码，因此完全不清楚该行的长度是多少，所以我只是在示例中将它加倍。

要计算终点，只需从中心点的加倍x / y坐标中减去起始x / y坐标。

我写了一个动态示例，它将鼠标坐标作为起始位置，但如果您只有一个来自用户输入的静态点，则适用相同的原则。在这里试试：

var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var centerPoint;

function setSize() {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  centerPoint = {x: canvas.width / 2, y: canvas.height / 2};
}

canvas.addEventListener('mousemove', function(e) {
  canvas.width = canvas.width;
  context.beginPath();
  context.moveTo(e.offsetX, e.offsetY);
  context.lineTo(centerPoint.x * 2 - e.offsetX, centerPoint.y * 2 - e.offsetY);
  context.lineWidth = 3;
  context.strokeStyle = '#0000ff';
  context.stroke();
})

canvas.addEventListener('mousedown', function(e) {
  centerPoint = {x: e.offsetX, y: e.offsetY};
  canvas.width = canvas.width;
})

window.addEventListener('resize', setSize);
setSize()

canvas {width: 100%;height: 100%;position: absolute;}
body {margin: 0}
p {position: absolute; pointer-events: none}

<canvas id="c"></canvas>
<p>Click anywhere to set the center point (dead center by default)</p>