时间戳

首页 > 解决方案 > 如何准确指定我需要填写 HTML Canvas 的内容？

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

问题描述

在我的应用程序中，我使用 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>

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

标签： javascripthtmlcsscanvas

解决方案

您将有一个更好的时间拥有一个单独的功能，该功能可以根据您的状态（即您拥有的点）完全重绘画布。

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>

推荐阅读