Как очистить Canvas?

Вопрос

Подскажите, пожалуйста, как можно очистить Canvas (удалить с него все объекты), чтобы рисовать на нем снова. Что-то не могу найти такую функцию.

Ответ №1
canvas.width = canvas.width;

Или

ctx.clearRect(0, 0, canvas.width, canvas.height);

Однако, нужно иметь ввиду, что вариант из canvas.width сбрасывает всё состояние Канваса (такие параметры как transformations, lineWidth, strokeStyle и т.п.), поэтому это очень медленно по сравнению со вторым вариантом.

У второго варианта тоже есть особенность: если Вы изменили матрицу трансформаций, то, вероятно, Ваш Канвас не очистится полностью. Решение может заключаться в сбросе матрицы трансформации:

// Сохраняем текущую матрицу трансформации
ctx.save();
// Используем идентичную матрицу трансформации на время очистки
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Возобновляем матрицу трансформации
ctx.restore();

No responses yet

Добавить комментарий