Руководство по 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 года, мы утеряли историю по этому руководству, в том числе атрибуции ко всем прошлым, участвовавшие в его создании. Мы приносим извинения за это, и надеемся, что вы простите нас за этот несчастный случай.