html 5. Об элементе Canvas

Элемент canvas появившийся в JavaScript движках наряду с некоторыми другими возможностями дает вэб-разработчикам возможность создавать детализированные и интерактивные 2D вэбстраницы без использования сторонних 3D плагинов. В этом топике обсудим некоторые возможности canvas и его потенциальные возможности.

JavaScript и элемент Canvas

HTML начал жизнь как формат для статичных страниц. Анимированные GIF изображения и мигающий текст - вот и вся динамика, которую он мог предоставить. JavaScript изменил все, позволяя динамическое изменение вэб-страниц и многие вэб-сервисы теперь используют и технологию AJAX для создания сайтов, которые дают пользователю более привычную работу, чем "нажал, обновилась страница, нажал", которая обычно так часто используется в обычных html-страницах.

К сожалению, JavaScript несколько ограничен функциональностью браузеров, в которых он работает. И если вы вполне можете создавать и изменять элемент на странице, то с помощью JavaScript вы не сможете (просто) заставить клиентскую машину отображать новый тип объектов. JavaScript может изменять текст, вставлять изображение или с легкостью изменять таблицу, так как эти элементы уже поддерживаются в HTML. Но что, если вы захотите чего-то больше, как например создать игру? Все, что вы могли использовать это стандартные элементы html таким образом, для которого они вовсе не предназначены. Ну или вам пришлось бы использовать плагины вроде Flash или Silverlight.

Появился элемент canvas. Этот новый HTML элемент предоставляет возможность JavaScript разработчикам рисовать прямо на странице без использования плагинов. Он впервые был представлен компанией Apple в их фреймворке WebKit и используется браузером Safari и виджетами Dashboard. Элемент canvas теперь является частью html 5 и теперь поддерживается большинством браузеров, таких как Chrome, Firefox, Opera и Konqueror. Internet Explorer (по-крайней мере до версии 8)  является исключением, хотя проекты вроде ExplorerCanvas предоставляют некоторую функциональность  элемента canvas в IE.

Любой кто работал с программированием 2D графики увидит что использование элемента canvas достаточно легкое и простое. Вы можете рисовать линии, фигуры, градиенты и даже изменять отдельные пиксели с помощью функций, которые очень похожи на большинство подобных в других 2D API. И огромное спасибо производительности последних JavaScript движков Chrome V8, Firefox SpiderMonkey и Safari Nitro за то что создание детализированных и интерактивных вэб-приложений теперь вполне доступно.

В этой серии статей мы посмотрим как создать простую игру с помощью JavaScript и элемента canvas. Мы раскроем такие темы как анимация, загрузка ресурсов, рендеринг слоев, прокрутка и взаимодействие.