Графика на JavaScript

Графика на JavaScript
Автор: Питер
Год: 2013
ISBN: 978-5-4461-0034-7
Страниц: 272
Язык: Русский
Формат: PDF
Размер: 10 Мб

Download

В этой книге рассказывается, как, работая с javascript, jQuery, DHTML и элементом Canvas (холст), появившимся в HTML5, создавать насыщенные веб-приложения для ПК и мобильных устройств. С появлением HTML5 и усовершенствованной браузерной поддержки язык javascript стал исключительно удобным для создания высокопроизводительной веб-графики.
Опытный веб-разработчик, прочитав данное издание, на практических примерах изучит интересные и полезные подходы к созданию аркадных игр, эффектов DHTML и т. д. Сложные темы представлены в книге в виде легких для усвоения фрагментов.

+

Продвинутый пользовательский интерфейс

Графика — это не только красивые картинки. При программировании графики мы можем дать пользователю более привлекательные и интересные элементы графического интерфейса. Тогда пользователь сможет более эффективно работать с вашими страницами. В этой главе мы поговорим о том, как можно сгладить недостатки, присущие формам HTML. Мы рассмотрим возможность взаимодействия пользователя с вашим приложением, применение библиотек и самостоятельно запрограммированных элементов, которые помогут нам оптимизировать взаимодействие наших приложений с пользователями.

Формы HTML5

В языке HTML5 появились новые элементы-формы, которые обеспечивают реализацию новых функций. Эти элементы значительно облегчают работу веб-дизайнера, особенно в том, что касается валидации форм и специализированного отображения виджетов. Данные компоненты обеспечивают более насыщенные возможности работы с браузером, причем (теоретически) обходятся без всякого дополнительного клиентского программирования.
Конечно же, осуществлять валидацию на стороне клиента удобно. Но в таком случае не составляет труда и написать зловредную спуфинговую форму, которая будет отсылать на сервер неверные данные. Весь ввод, попадающий в формы, также должен проходить валидацию на стороне сервера. Так мы сможем избежать опасных последствий, связанных с обработкой вредоносных данных или информационного мусора (Junk Data).

Введениев программирование игр на JavaScript

22 мая 2010 года компания Google выпустила собственную версию старинной «точкоглотательной» игры Рас-Man1. Эта игра, заново разработанная в ознаменование тридцатилетия с момента появления первой Рас-Man, появилась на месте логотипа Google на главной странице знаменитого поисковика (рис. 5.1). Многие пользователи предположили, что этот забавный ремейк был создан с помощью HTML5, однако вскоре стало ясно, что вся игра написана на обычном DHTML (за исключением звуковых эффектов). В этой главе мы продолжим такую ретротему и разработаем собственную игру на DHTML. Называться она будет Orbit Assault (Орбитальная атака), это будет вариация легендарной игры Space Invaders2 (рис. 5.2).

Возможно, написание целой игры с нуля покажется кому-то слишком долгой и сложной задачей, но именно так — на практике — лучше всего изучать многие концепции, связанные с разработкой игр.

Только вот зачем ограничиваться обычным DHTML? Почему бы не перейти сразу к чему-то более продвинутому, например к HTML5 Canvas? Считайте предстоящую работу «кроссом по пересеченной местности»: если можно создать что-то качественное с помощью простого DHTML, то, разумеется, вооружившись Canvas, мы будем способны на большее.

Игра Space Invaders была выпущена в 1978 году японской корпорацией Taito. Игру разработал Томохиро Нишикадо. Он не только спроектировал и запрограммировал эту игру, но и создал аппаратную платформ)’, на которой она работала. Его творение стало настоящим символом индустрии видеоигр. Эта притягательная игра интересна и сегодня.

Чтобы гарантировать, что наша Orbit Assault, которую мы напишем на DHTML, будет не менее интересна значительному количеству пользователей Интернета, мы должны соблюсти следующие требования.

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

Холст HTML5

Одна из самых соблазнительных возможностей в HTML5 — это холст (элемент Canvas). Холст представляет собой обычную прямоугольную область, расположенную на странице (этим он напоминает di v). На холсте можно рисовать самую затейливую графику с помощью JavaScript. Холст является разработкой Apple и первоначально предназначался для отображения виджетов пользовательского интерфейса и прочих картинок в операционной системе Mac OS и браузере Safari. Компания Apple отказалась от своих патентных прав на этот элемент на условиях лицензии консорциума W3C, не требующей авторских выплат. Это означает, что Apple предоставляет на элемент Canvas такую лицензию, если элемент Canvas используется в соответствии с рекомендациями консорциума W3C относительно HTML.

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

Canvas — это низкоуровневый интерфейс программирования приложений (API), работающий в непосредственном режиме.

  • Низкоуровневый интерфейс — Canvas предоставляет «дешевый и сердитый» базовый функционал. Например, любой прямоугольник в нем — это всего лишь нативная простая фигура. Тем не менее такой лаконичный функционал легко дополнить с помощью скриптов JavaScript.
  • Непосредственный режим — рисовальные команды Canvas выполняются в момент вызова. В отличие от SVG (масштабируемой векторной графики), в Canvas отсутствует непосредственная структура данных, в которой иерархия графических объектов сохраняются до отрисовки. Это означает, что графические операции можно выстраивать в виде неограниченного количества уровней, без негативного влияния на производительность всего приложения. Подобная организация отлично подходит для таких приложений, как растровые арт-пакеты либо программы с другими замысловатыми «многоуровневыми» эффектами.

Следующий код Canvas отображает голубой прямоугольник.

Основы рисования на холсте

Основные рисовальные команды, применяемые при работе с холстом, довольно просты в реализации. Мы рассмотрим их в следующих разделах.

Элемент Canvas

Вставить элемент Canvas на веб-страницу не сложнее, чем любой другой HTML-элемент:

Если не указать атрибутов width или height, то холст получит задаваемые по умолчанию размеры 300 х 150 пикселов. Размер холста также можно изменять с помощью CSS (например, использовать width:50Х), но так делать не рекомендуется. В зависимости от реализации браузера графический вывод может получиться искаженным или неправильно масштабированным. Тем не менее элемент можно оформлять обычными границами, полями и фоновыми цветами. Правда, такие приемы никак не влияют на сам ход отрисовки на холсте. По умолчанию начало координат (0; 0), как обычно, находится в левом верхнем углу. Так, например, какой-то фрагмент, размещающийся в точке (10; 15), будет находиться в 10 пикселах от левого края и в 15 — от верхнего.

Если в браузере не поддерживается элемент Canvas, то между начальным и конечным тегами будет отображаться резервное содержимое (Fallback Content). В идеале это должно быть представление данных Canvas в виде обычного текста или HTML. Так, например, если на холсте должна отображаться круговая диаграмма, то в качестве резервного содержимого подойдет обычная таблица с этими же данными. В некоторых ситуациях резервное содержимое принципиально не может заменить информацию с холста; например, у игр и рисовальных приложений просто нет эквивалентов в обычном HTML. В таком случае резервное содержимое должно представлять собой полезное сообщение — как правило, в нем вы указываете пользователю, что холст не поддерживается и браузер следует обновить.

Просто поместив на страницу участок холста, мы не получаем никаких дополнительных функций. Чтобы холст делал что-то полезное, он должен управляться языком JavaScript. Холст редко применяется без атрибута id, поскольку именно по этому атрибуту холст идентифицируют скрипты. Как правило, JavaScript получает процедурный указатель для работы с холстом (переменную типа HANDLE) следующим образом: