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

РИСОВАНИЕ
в HTML


Назначение страницы

Создал этот раздел для тестирования интересных тэгов, появившихся у HTML 5, в своём привычном HTML 4.01 Transitional.

Рисование в HTML

Интересовало, можно ли(?) использовать эти новые тэги в прежней версии HTML? Будут ли работать?

Естественно, что тестировал не все, а лишь те, которые меня больше всего заинтересовали.

Всё делал и проверял в браузере "Yandex"!


Тэг canvas

Прежде всего, меня заинтересовал тэг canvas, который дословно переводится как "холст". С его появлением, возможности по оформлению веб-страниц сайтов значительно возросли.
Появилась возможность рисовать на HTML-странице сайта.

Особенности тэга canvas

Самое главное, нужно помнить о его структуре. Он ведёт себя и как строчный, и как блочный элемент одновременно.
Следовательно, он относится к, так называемым, строчно-блочным элементам.

Подобное означает, что этому элементу присущи какие-то особенности строчных тэгов, и какие-то он взял от блочных.

Внимание!

Правда, на самом-то деле, теперь это абсолютно НЕ важно, поскольку любой элемент можно легко сделать каким угодно с помощью таблицы стилей.

Достаточно прописать в ней правило:  display:inline; или display:block; либо же оставить как сейчас - display:inline-block;

Но всё же - лучше об этом знать!

По умолчанию: имеет ширину (width) - 300 px и высоту (height) - 150 px, которые можно менять прямо в атрибутах этого тэга.
Однако!  Вместе с этим, атрибут align в нём НЕ работает!

Поэтому, все необходимые изменения в его расположении следует проводить, используя атрибут style.
Тем не менее, глобальный тэг <center> действует на него, как полагается.

Внимание! Важно!  Если не требуется пробел между элементами, следует тэги в коде писать в одну строчку!

И ещё!  Текст, написанный между тэгами canvas, будет виден только(!), если браузер пользователя не поддерживает данный тэг.

Очень похожие особенности я обнаружил и при изучении других веб-элементов: "Индикаторы" (откроются в новом окне).


Отображение тэга canvas

Сначала показываю его отображение ещё БЕЗ прописывания в нём каких-либо атрибутов, то есть - "по умолчанию". Начало и конец вывода обозначил горизонтальными разделительными линиями.

Начало тэга canvas



Конец тэга canvas

Хорошо видно, что "по умолчанию" его фон прозрачен!

И такую его особенность вполне можно использовать, если по каким-либо причинам на странице потребуется БОЛЬШОЙ ПРОБЕЛ.

Хотя, конечно, такое вряд ли кому-нибудь, когда-нибудь (из-за необходимости экономить место на сайте) потребуется. Вряд ли!   Но возможность такая есть ... ... ... .

* * *

А вот так он будет отображаться внутри тэга <p>, если уменьшить ему размеры ширины и высоты до 30 px, и дать в атрибуте стиля однопиксельную рамку.

Текст написал ради наглядности данного примера.

* * *

Браузер может отобразить этот тэг и так, если прописать ему желаемый размер, и в атрибуте стиля соответствующего цвета рамку.

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

* * *

Теперь можно показать и самое интересное - рисование в HTML с помощью этого интересного и очень полезного тэга.


Рисование тэгом canvas

Сначала покажу самое простое, сделанное только с помощью HTML и атрибута стилей CSS, указанного в каждом из тэгов.

Два разноцветных прямоугольника нарисованы, прописыванием цепочки из двух тэгов подряд. Кроме того, заключил эту цепочку в тэг center (чтобы были посередине).

Вот они


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

Такая важная особенность написания кода присуща не только этим элементам. Упоминал о них здесь: Особенности

Рисование нескольких объектов

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

Ещё пример



Последний из примеров "нарисован" всего лишь добавлением тэга <br> в нужное место между тэгами canvas.

Не забывать лишь о правильном написании кода! Важно!

И, если об этом не забывать, и особо не смущает длина строчек HTML-кода, то можно легко нарисовать и вот такую фигуру.




В этом примере рисования на веб-странице с помощью тэгов canvas, фактически, всё то же самое, что и в предыдущем.
Скопировал первые строчки кода, вставил их последними, а между ними прописал всё тот же тэг <br>.

Единственная разница - поменял в атрибутах style фоновый цвет, убрав его из среднего вообще. В смысле - убрал из него весь этот атрибут.

* * *

А изменив всего лишь размер, указанный в атрибутах этого тэга, можно получить вот такой маленький, крохотный рисунок.




* * *

Подобным же образом, с помощью этого интересного тэга, можно рисовать на любых веб-страницах сайтов даже и не такие простые рисунки.


Использование тэга canvas

Чаще всего этот тэг используют для создания маленьких рисунков. И эти рисунки очень похожи на те, что можно сделать в "Фотошоп" (откроется в новом окне), применяя технику "пиксель-арт".

Использование тэга canvas

Однако!  Всё же стоит сказать, что в упомянутом фотошоп нарисовать подобные значки гораздо-гораздо проще, чем делать это с помощью тэгов canvas.

А для простого использования именно этих тэгов, им вполне можно найти применение в качестве оформительских элементов для какого-либо текста.

К примеру, так

ТЕКСТ

Конечно, для практического использования этих тэгов с такой целью (декоративное оформление текста), им нужно подобрать подходящие цвет и размер. Здесь же я показал лишь принцип такого способа.


Взаимодействие canvas и JavaScript

Зная о том, что возможности тэга canvas часто используют в программировании, решил проверить.
Выяснил, что JavaScript позволяет рисовать внутри этого элемента, и очищать его от нарисованного.

Их взаимодействие можно посмотреть здесь: "Очистка холста" (в новом окне).


Заключение

Если интересуют другие интересные для сайта HTML возможности оформить свой сайт, стоит посетить страницу "Текстовые эффекты" (откроется в новом окне).


Назад

ВВЕРХ

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

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