如何准确指定需要填写 HTML Canvas 的内容？

Question

在我的应用程序中，我使用 HTML Canvas 创建了一个画布，我希望能够单击页面以绘制一个用颜色填充的圆圈，单击页面的另一部分并让圆圈自动与一条线连接。

我几乎可以使用它，但是当我尝试填充我的圆圈时，它也会填充圆圈之间的空间。

这是我尝试使用 ctx.fill() 时的样子：

let hasCircle = false;

document.addEventListener('click', onMouseMove);

const c = document.getElementById("canvas");
const ctx = c.getContext("2d");

// Create a circle on page click
document.getElementById('canvas').onclick = function(event) {
 
  ctx.arc(event.clientX - 10, event.clientY - 10, 4, 0, 2 * Math.PI);
  ctx.fill()
  
    if (!hasCircle) {
      hasCircle = true;
    }
}

// Connect circles with a line
function onMouseMove(event) {
    if (hasCircle) {
      ctx.lineTo(event.clientX - 10, event.clientY - 10);
      ctx.stroke();
    }
}

function reset() {
    hasCircle = false;
}

#canvas {
  border: 1px solid black;
}

<canvas id="canvas"></canvas>

有没有办法准确地指定我想用颜色填充什么？

Answer 1

如果你有一个单独的函数，可以根据你的状态（即你拥有的点数）完全重绘画布，你会更好。

const c = document.getElementById("canvas");
const ctx = c.getContext("2d");
const points = [];

function redraw() {
  c.width = c.width; // clear canvas
  if (!points.length) return;
  // Fill points one by one
  ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
  points.forEach(([x, y]) => {
    ctx.beginPath();
    ctx.arc(x, y, 4, 0, 2 * Math.PI);
    ctx.fill();
  });

  // Begin new path for polygon
  ctx.beginPath();
  points.forEach(([x, y], i) => {
    if (i == 0) ctx.moveTo(x, y);
    else ctx.lineTo(x, y);
  });
  ctx.lineTo(points[0][0], points[0][1]);
  ctx.stroke();
}

document.getElementById("canvas").addEventListener("click", (event) => {
  points.push([event.clientX - 10, event.clientY - 10]);
  redraw();
});

#canvas {
  border: 1px solid black;
}

<canvas id="canvas"></canvas>