如何操纵颜色以快速更新 html 画布上的许多点

Question

我用js写了一个模拟，还有动画组件。

html 画布上有一堆圆圈。我想删除 1 个圆圈。

通常我只是清除画布并重新绘制每一帧的所有内容。

我有什么方法可以通过在其上方绘制一个新圆圈来删除该圆圈吗？就像（如果我是对的）紫色#f0f 撤销绿色#0f0。

我在画布上遇到了一些困难，所以也许我还很遥远。但我的想法是，想象一个给定的像素具有原始颜色 c0。由于我画的圆圈，它被涂上颜色 c1。所以现在像素具有新的颜色 c2=f(c0,c1)。我试图获得颜色 c3，这样当我将 c3 分层到 c2 上时，我得到 c0，就像 c0=g(c3,c2) 一样。

重点是通过避免重绘每个点来节省时间。

无论如何，这种方法或类似的方法可能吗？

Answer 1

我不知道混合颜色是什么意思，但是是的，你可以在其他颜色上绘制。

但是，绘制圆圈并不总是精确的，您可能会在边缘周围留下一些剩余的颜色。

const canvas = document.getElementById('my-canvas');
const colourInput = document.getElementById('colour-input');
const drawButton = document.getElementById('draw-button');
const form = document.getElementById('my-form');
const ctx = canvas.getContext('2d');

function draw(colour) {
  ctx.beginPath();
  ctx.arc(100, 75, 50, 0, 2 * Math.PI);
  ctx.fillStyle = colour;
  ctx.fill();
}

function submitForm(e) {
  e.preventDefault();
  draw(colourInput.value);
  colourInput.value = '';
}

form.addEventListener('submit', submitForm);
draw('red');

<p>Type a colour and press enter</p>
<canvas
  id="my-canvas"
  width="200"
  height="150"
  style="border: 1px solid grey"
></canvas>
<br />
<form id="my-form">
<label>Colour:</label>
<input id="colour-input"/>
<br/>
</form>