html5-canvas
Очистка экрана

Синтаксис

• void clearRect (x, y, ширина, высота)
• ImageData createImageData (ширина, высота)

замечания

Прямоугольники

Вы можете использовать метод clearRect для очистки любого прямоугольного участка холста.

// Clear the entire canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

Примечание: clearRect зависит от матрицы преобразования.

Чтобы справиться с этим, можно сбросить матрицу преобразования, прежде чем очистить холст.

ctx.save();                                       // Save the current context state
ctx.setTransform(1, 0, 0, 1, 0, 0);               // Reset the transformation matrix
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.restore();                                    // Revert context state including 
                                                  // transformation matrix

Примечание: ctx.save и ctx.restore только в том случае, если вы хотите сохранить состояние контекста в холсте. В некоторых ситуациях сохранение и восстановление могут быть медленными и в большинстве случаев следует избегать, если это не требуется.

Исходные данные изображения

С помощью putImageData можно напрямую записывать полученные данные putImageData . Создав новые данные изображения, а затем присвоив их холсту, вы очистите весь экран.

var imageData = ctx.createImageData(canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);

Примечание. На putImageData не влияют никакие преобразования, применяемые к контексту. Он будет записывать данные непосредственно в область отображаемого пикселя.

Сложные формы

Можно очистить сложные формы областей, изменив свойство globalCompositeOperation .

// All pixels being drawn will be transparent
ctx.globalCompositeOperation = 'destination-out';

// Clear a triangular section
ctx.globalAlpha = 1;    // ensure alpha is 1
ctx.fillStyle = '#000'; // ensure the current fillStyle does not have any transparency
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(0, 10);
ctx.lineTo(20, 10);
ctx.fill();

// Begin drawing normally again
ctx.globalCompositeOperation = 'source-over';

Прозрачный холст с градиентом.

Вместо использования clearRect который делает все пикселы прозрачными, вам может понадобиться фон.

Очистить с помощью градиента

// create the background gradient once
var bgGrad = ctx.createLinearGradient(0,0,0,canvas.height);
bgGrad.addColorStop(0,"#0FF");
bgGrad.addColorStop(1,"#08F");

// Every time you need to clear the canvas
ctx.fillStyle = bgGrad;
ctx.fillRect(0,0,canvas.width,canvas.height);

Это примерно вдвое 0.008ms 0,008 0.008ms как clearRect 0.004ms но 4 миллиона секунд не должны отрицательно влиять на анимацию в реальном времени. (Времена будут значительно различаться в зависимости от устройства, разрешения, браузера и конфигурации браузера. Время для сравнения)

Прозрачный холст с использованием композитной операции

Очистите холст, используя операцию компоновки. Это очистит холст, не зависящий от преобразований, но не так быстро, как clearRect() .

ctx.globalCompositeOperation = 'copy';

все, что нарисовано дальше, очистит предыдущий контент.