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

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

Тэг canvas и JavaScript

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

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

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

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

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

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

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

Испытал!

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

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


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

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

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

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



JavaScript

ВВЕРХ

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

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru