Тэг CANVAS

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

Решил сделать такую страницу в качестве дополнительной, к уже существующей странице об использовании этого тэга: "Рисование в Javascript" (*см. навигатор).

Речь идёт о тэге canvas, который появился в HTML 5.

Хотелось протестировать и узнать, как ещё(?) его можно использовать в версии HTML 4.01 Transitional.

Вот как раз об этом подробно, с примерами, я и рассказываю на данной тестовой странице сайта.

Но сначала - стоит вспомнить реальный тэг, с помощью которого рисуют в HTML на страницах сайтов без всяких скриптов!  Это тэг svg, с которого всё и началось.

Подробно и полностью наглядно о нём здесь:

А на этой странице "герой повести" - тэг canvas, который меня тоже сильно заинтересовал своими возможностями.
И первое, что необходимо сделать - "познакомиться" с ним как следует. Другими словами, нужно понять, что это "за зверь такой" , и как он будет отображаться браузерами ещё БЕЗ воздействия каких-либо скриптов на него.

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

Тэг canvas

Название этого тэга: "canvas" - дословно переводится с английского как "холст", что, собственно, и говорит о его прямом назначении.

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

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

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

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

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

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

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

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

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

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

Начало тэга canvas.

Конец тэга canvas.

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

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

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

* * *

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

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

* * *

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

* * *

Схожесть в отображении тэгов canvas и svg

Протестировав отображение браузерами этого тэга ещё БЕЗ подключения к нему скриптов, стало очевидно, что оно в точности совпадает с тем, как те же самые браузеры отображают его "коллегу", т.е. тэг svg.

Но здесь говорить о тэге svg не буду. У него свой собственный БОЛЬШОЙ РАЗДЕЛ. Подробно и полностью наглядно о нём здесь:

* * *

Теперь можно показать и самое интересное - рисование в HTML с помощью тэга canvas, которое на этой странице следует расценивать, как продолжение его тестирования.

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

Этому отведена целая, БОЛЬШАЯ, отдельная страница сайта, и пройти на неё можно или по верхнему мини-навигатору, либо здесь:

А на этой странице ещё кое-что интересное!

Попробовал рисовать в HTML с его помощью, правда, нужно обязательно сразу сказать - несколько необычным способом!

Каким?!

Как можно рисовать тэгом canvas даже БЕЗ скриптов!

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

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

Вот они.

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

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

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

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

Ещё пример.

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

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

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

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

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

* * *

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

* * *

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

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

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

ТЕКСТ

Или так.

ТЕКСТ

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

* * *

Естественно, показанный необычный способ рисования тэгом canvas, это всего лишь возможность, о которой стоит знать.
Как им рисуют на самом деле, т.е. практически, показал здесь: вспомнить

Заключение

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

Самый простой способ рисования для страниц своего сайта показал в БОЛЬШОМ разделе здесь: "Фотошоп" (откроется в новом окне).

Поскольку данной страницы нет в верхнем мини-навигаторе, но она тесно связана с разделом "Рисование в JavaScript", вернуться в него можно по нижней стрелке прямого перехода.

ВВЕРХ