Как очистить 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();

5 комментария

  • Даниил:

    У меня есть карта России, в которой я подсвечиваю регионы при наведении. Регионы подсвечиваю с помощью атрибута coords тега area (забираю координаты, делаю .split(‘,’)…). Проблема в следующем:
    При потере фокуса канвас должен очищаться. Если я чищу его вот так «canvas.width = canvas.width;», то в мозиле и хроме всё отлично работает, а в ИЕ7-9 при наведении на другой регион также подсвечиваются все предыдущие регионы (на которые наводились раньше). При очищении способом «ctx.clearRect(0, 0, canvas.width, canvas.height);» проблемма как в способе 1, только во всех браузерах.
    Пробовал при потере фокуса удалять канвас и добавлять его снова — не работает в ИЕ 7 и 8.

    Посоветуйте что делать.

    • Администратор:

      К сожалению, помочь не могу, так как не сильно разбираюсь в этой технологии. Я так понимаю, для поддержки IE ранних версий Вы используете explorercanvas?

  • Даниил:

    пример можно посмотреть тут:
    http://tsigelization.narod.ru/proton/example1.html

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


(обязательно)