Использование: context.clearRect(0, 0, canvas.width, canvas.height);
Это самый быстрый и описательный способ очистить весь холст.
Не используйте: canvas.width = canvas.width;
Сброс canvas.width
сбрасывает все состояние холста (например, transformation, lineWidth, strokeStyle и т. Д.), Он очень медленный (по сравнению с clearRect), он работает не во всех браузерах и не описывает, что вы на самом деле пытаетесь сделать.
Работа с преобразованными координатами
Если вы изменили матрицу преобразования (например, используя scale
, rotate
или translate
), то context.clearRect(0,0,canvas.width,canvas.height)
, скорее всего, не очистите всю видимую часть холста.
Решение? Сброс матрицы преобразования до очистки холста:
// Store the current transformation matrix
context.save();
// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
context.restore();
Редактировать:
я только что провел некоторое профилирование и (в Chrome) примерно на 10% быстрее очистить холст 300x150 (размер по умолчанию) без сброса преобразования. По мере увеличения размера вашего холста эта разница уменьшается.
Это уже относительно незначительно, но в большинстве случаев вы будете рисовать значительно больше, чем очищаете, и я считаю, что эта разница в производительности не имеет значения.
100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear
clearRect
вам нужно либо иметь нетрансформированный контекст, либо отслеживать ваши фактические границы.