为什么我不能用HTML5中的另一个空画布清除画布？

Posted 2021-03-27

const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');
// buffer canvas and screen canvas have same width and height

// draw a circle on buffer canvas
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();

// render to screen canvas (working)
screen.drawImage(buffer, 0, 0);

// clear canvas when click
canvas.addEventListener('click', () => {
  context.clearRect(0, 0, buffer.width, buffer.height);
  screen.drawImage(buffer, 0, 0);   // not working
  // only working with `screen.clearRect(0, 0, canvas.width, canvas.height);`
})

与上面的代码一样，当使用空画布清除另一个画布时，它不起作用。 （仅限<canvas id="canvas"></canvas>标签的html）。在https://jsfiddle.net/wjvtzng7/现场演示

答案

如果我们写下你正在做的事情，我们得到：

一个屏幕外画布“缓冲”，一个可见画布“屏幕”。

一步步，

• 在“缓冲区”上画一个圆圈 在这个阶段 “缓冲区”代表一个圆圈， “屏幕”表示空图像（透明像素）。
• 在“屏幕”画布上绘制“缓冲区” “缓冲区”代表一个圆圈， “screen”代表一个圆圈
• 清除“缓冲区” “buffer”表示空图像（透明像素） “screen”代表一个圆圈
• 在“屏幕”画布上绘制“缓冲区” “buffer”表示空图像（透明像素） “screen”代表一个圆圈

看来你的困惑来自最后一颗子弹。但是这个操作可以改写为

• 将空图像（透明像素）绘制到表示圆的图像。

这确实没有做任何事情......至少在正常的合成模式源代码中，绘制完全透明的像素什么都不做。有关它的更多信息，请参阅alpha-compositing。

因此，如果您希望清除“屏幕”画布，您确实需要使用clearRect()上下文的screen方法清除它。还有其他方法，但不要使用它们。

---

---

现在，我觉得我还应该指出还有其他compositing modes而不是source-over可用，而你所期望的实际上可以通过以下方法之一完成：复制。

const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');

// initialize
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
buffer.width = window.innerWidth;
buffer.height = window.innerHeight;
// draw a circle
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();

// render to screen canvas
screen.drawImage(buffer, 0, 0);

// clear canvas when click
canvas.addEventListener('click', () => {
  context.clearRect(0, 0, buffer.width, buffer.height);
  // only the next drawing operation on screen will be visible
  // everything else will get cleared out
  screen.globalCompositeOperation = "copy";
  screen.drawImage(buffer, 0, 0);
  // set back to default mode
  screen.globalCompositeOperation = "sourc-over";
})

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

以上是关于为什么我不能用HTML5中的另一个空画布清除画布？的主要内容，如果未能解决你的问题，请参考以下文章

如何清除画布html5？ [复制]

Android 4+ html5画布不重绘

如何在 HTML5 画布上绘图

使用画布的 HTML5 中的逐帧动画

HTML5 画布下落的五彩纸屑/雪多个对象

使用 javascript 从 HTML5 画布镜像形状