Руководство по Canvas
<canvas>
— это HTML элемент, использующийся для рисования графики средствами языков программирования (обычно это JavaScript). Он может, к примеру, использоваться для рисования графов, создания коллажей или простой анимации.
Изображения в правой части статьи являются примерами использования <canvas>.
Примеры их создания приводятся в этой статье.
В этом руководстве описываются основы использования элемента <canvas>
для рисования 2D-графики. Приведённые примеры дадут вам понимание того, что вы можете сделать с помощью <canvas>, а использованные в статье фрагменты кода помогут в создании собственных проектов.
Впервые <canvas>
использовался компанией Apple для создания Mac OS X Dashboard, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживают работу с <canvas>. Тег <canvas>
часть спецификации WhatWG Web applications 1.0 также известной как HTML5.
Прежде чем начать
Работа с элементом <canvas>
довольно проста, но потребует от вас базовых знаний HTML и JavaScript. Следует предупредить о том, что элемент <canvas>
не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер <canvas>
300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов height
и width
. Для рисования графики <canvas>
мы будем использовать javascript context object
, который создаёт графику динамически.
В этом руководстве
Смотрите Также
Примечание для помощников
Из-за досадной технической ошибки, которая произошла 17 июня 2013 года, мы утеряли историю по этому руководству, в том числе атрибуции ко всем прошлым, участвовавшие в его создании. Мы приносим извинения за это, и надеемся, что вы простите нас за этот несчастный случай.