Почему я не могу очистить холст с другим пустым холстом в HTML5?

Question

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);`
})

Как и в коде выше, при использовании пустого холста для очистки другого холста он не работает. (HTML только с тегом <canvas id="canvas"></canvas>). Демонстрация в реальном времени на https://jsfiddle.net/wjvtzng7/

Answer 1

Если мы запишем, что вы делаете, мы получим:

Один закадровый холст " буфер " и один видимый холст " screen ".

Шаг за шагом,

• нарисуйте круг в буфере " "
  На данном этапе
  • " буфер " представляет кружок ,
  • " screen " представляет собой пустое изображение (прозрачные пиксели) .
• рисовать " буфер " на " экран " холст
  • " буфер " представляет круг ,
  • " screen " представляет собой круг
• очистить " буфер "
  • " буфер " представляет пустое изображение (прозрачные пиксели)
  • " screen " представляет круг
• рисовать " буфер " на " экран " холст
  • « буфер » представляет пустое изображение (прозрачные пиксели)
  • " screen " представляет круг

Кажется, ваше замешательство происходит от последней пули. Но эту операцию можно переписать как

• нарисуйте пустое изображение (прозрачные пиксели) на изображении, представляющем круг .

Это действительно ничего не делает ... по крайней мере, в обычном режиме композитинга режиме в режиме источника , где рисование полностью прозрачного пикселя ничего не делает. См. альфа-композитинг для получения дополнительной информации об этом.

Поэтому, если вы хотите очистить свой холст " screen ", вам действительно нужно очистить его, используя clearRect() метод контекста screen. _{Есть и другие способы, но не используйте их.}

---

---

Теперь я почувствовал, что должен также указать, что есть и другие режимы композитинга , отличные от 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>