Логотип Валидатор Валидатор Качество создания сайта

Очистка холста

JavaScript для очистки canvas

Данная страница - это ещё одна из 3-ёх страниц для изучения способов рисования в HTML с помощью JavaScript.

Зачем нужен тэг canvas, т.е. "холст", и как можно рисовать с его помощью, я показал достаточно в разделе "Рисование в JavaScript" (*см. навигатор).

Что такое(?) тэг canvas, об особенностях его отображения браузерами подробно рассказал и показал на его странице "Тэг CANVAS" Тэг CANVAS

Оказалось, что JavaScript не только позволяет рисовать внутри этого элемента, но кроме того он ещё способен и очистить холст от нарисованного им же.

Данную страницу я специально создал для испытаний этой "сладкой парочки".Их самых!
Сначала показываю код, который испытываю, а после можно проверить его работу, да и узнать о некоторых его особенностях.   проверить сразу Очистка холста

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

Код рисования и очистки скриптом

Видно, что этот код предназначен для HTML 5.  Тем интереснее! Гораздо интереснее!
Можно сразу "убить двух зайцев": проверить ещё раз работу тэга canvas для HTML 4.01, и испытать этот код в действии в связке со скриптом.

Разобрался, и изменил код, который видно на рисунке, как мне хотелось. Сменил цвет и размеры выводимого поля у тэга canvas, заменил цвет квадрата, который до очистки холста в нём нарисовал JavaScript.

Испытал!

Внимание! Важно!  Чтобы JavaScript-код работал, обязательно(!), указать в функции очистки хотя бы один параметр!  Иначе работать не будет!

И гораздо лучше, чтобы поле вывода "не дёргалось" (после клика), прописать в скрипте те же параметры, что и у тэга canvas.

А теперь можно посмотреть и проверить действующий пример рисования и очистки.


JavaScript очистка холста

Сейчас внутри холста видно то, что нарисовал в нём JavaScript. Что делать дальше, думаю, вполне понятно.

Ваш браузер не поддерживает элемент canvas.

Prim.*  Для повторного просмотра работы тэга canvas и скрипта очистки, нужно страницу перезагрузить!



Данная страница "живёт" в учебном разделе "JavaScript", куда можно сразу перейти по нижней навигационной синей стрелке.
Верхний мини-навигатор соединит с другими страницами о рисовании в HTML.

ВВЕРХ

JavaScript

Все права защищены. Copyright © 2009 - Коротеев Владимир.

Яндекс.Метрика