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

Question

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

我几乎可以正常工作了，但是当我尝试填充我的圆圈时，它也填充了圆圈之间的 space。

这是我尝试使用 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

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

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>

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

How do I specify exactly what I need to fill in HTML Canvas?

html

javascript

css

canvas