HTML5 теги <canvas>

Новый тег HTML5 теги <canvas> нет в предыдущих версиях, которые можно использовать для рисования и работы с графикой.

Теги <canvas> потребности поддержки скриптового языка, такие как JavaScript, чтобы нормально функционировать и выполнять полностью свой потенциал.

Целью данной статьи является демонстрация основных использование новых тегов, но некоторые моменты, выдвинутые постоянное использование практических примеров, надеюсь, будет способствовать обучению.

Предпосылка

Как абсолютная новинка в лучших полотно поддерживается не всеми браузерами, поэтому не исключено, что демонстрация примеров в этой статье не отображаются правильно.
Тест проводился с Google Chrome, на котором вы не испытывали никаких проблем.

Используйте теги <canvas>

Общее использование Canvas теги довольно проста и не отличается от других HTML-теги.
Формально Холст является простой контейнера и, как таковая, имеет открывающий тег (<canvas>) и закрытия (</ Canvas>):

 <canvas id="esempio" width="196" height="96">

 





 Элемент не поддерживается







 </ Canvas>

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

Текст с разделителями часть по <canvas> и </ Canvas> представлять записке указывается, когда графический объект не поддерживается браузером.

Перед началом теста детали реализации потенциала холст с простой код для проверки жить:

 <canvas id="bandierina" width="180"> высота = "100"> не поддерживается </ Canvas>







 <script type="text/javascript">







 уаг холста = document.getElementById ('флаг');







 уаг с = canvas.getContext ('2 D ');







 c.fillStyle = '# FF0000';







 c.fillRect (0,0,180,100);







 c.fillStyle = '# FFFFFF';







 c.fillRect (0,0,120,100);







 c.fillStyle = '# 00FF00;







 c.fillRect (0,0,60,100);







 </ Script>

На этой странице вы можете увидеть результат этого кода (чтобы увидеть выход правильно, вы должны иметь, еще раз, браузер, который поддерживает HTML 5).

Как уже было объявлено в начале статьи в этом разделе код явного на то, что холст работы с использованием скрипта. Из этого примера мы можем сразу отметить стандартную технику для извлечения переменные объекта холст фон:

 / / Создаем холст элемент с ID







 уаг холста = document.getElementById ('флаг');









 / / Создать новый двумерный объект на холсте







 уаг с = canvas.getContext ('2 D ');

Javascript GetElementById метод сохраняет объект в переменной холст, через стоимость его поле идентификатора; getContext ('2 D ') принимает контекста, или объект, который предлагает программиста ряд методов для работы с холста, как желаемого (в нашем случае, если вы хотите работать с двухмерной графики функций, т. е. 2D).

На следующих страницах мы перечислим некоторые основные операции полезно программист намерен использовать холст.

• <<
• 1
• 2
• 3
• 4
• 5
• >>