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

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

  • Даниил:

    У меня есть карта России, в которой я подсвечиваю регионы при наведении. Регионы подсвечиваю с помощью атрибута 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

  • CaseyCip:

    We are Amiga toy CPS affiliate program, our affiliate have feature of easy use, high commission, high conversion rate. We offer great conditions, Lifetime Rev share start at 30% up to 50% depend on sales. Paid on every package customer purchases. Weekly, biweekly, monthly payments based on sales volume.
    We work with US and most Europe countries. We accept all kinds of traffic. search «Amiga toy affiliate» on google to reach us. link: http://aff.oc4pa.com

  • ClaytonDek:

    My Porn Free — это ежечасное открытое обновление порно мультфильмов самого отличнейшего качества , личностной и самодеятельной , жесткой и лёгкой порно эротичного определения . Наш порно сервис придаёт десятки фото , вы можете вовсе онлайн глядеть всё наше усвоение всех порно рубрик . Если вы выбирайте петтинг фото с секс-бомбами или незрелыми , негритянки и эге , психодраматической фистинг и фистинг . MyPornFree.ru интим фото портал удовлетворит все ваши порно-фантазии . Глядите первые добавленные порно видеоролики к нам на сервис . Видите порно бесплатно , глядите порно с мобильника и ноутбука , с Андроид или iPad ведь всю наши фото бесплатно порно фото видеоклипы xxx вполне онлайн и только в отличнейшем качестве собранное правильно для Вас . Кидайте фото на номера или же поглядите через сотовый каталог ведь наше качество прибыли фото самая повышенное . Прекрасного файла фото порно бесплатно с звонка mypornfree.ru.

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


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