Предыдущий ролик Следующий ролик  

Видео урок: Определение методов и свойств элемента Canvas

HTML5: графика и анимация с Canvas

Мы видели, как объявить canvas в HTML. А теперь давайте рассмотрим, как использовать скрипт, чтобы повлиять на то, как canvas выглядит в браузере. Я открываю мой файл с примерами, сейчас я нахожусь в главе 04, открываю contextprops_start, и вы видите, что есть некоторый код, который мы должны написать. Давайте быстренько рассмотрим это в браузере. Я показываю это в IE, и вы видите здесь пунктирный контур. Тут нет цвета для заднего фона, только контур, и теперь мы напишем немного кода, который повлияет на то, как сам тег canvas отобразится в браузере.

Давайте вернемся к файлу с кусками кода, нам нужны три строки в разделе ContextProps, мы их копируем и вставляем вот сюда, в функцию window.onload. То есть, при загрузке окна у нас есть некоторый код, который получит ссылку на элемент canvas, вызывая getElementById, и вот этот canvas. А затем мы программно поменяем ширину и высоту с 400 и 300 на 150 x 150. Сохраняем все это и возвращаемся в браузер. Если мы обновим страницу, то вы увидите, что canvas стал меньше.

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