Графика на JavaScript

Практическое руководство.

Рафаэлло Чекко "Графика на JavaScript" Питер, 2013 год, 272 стр. ил., O’Reilly, (4,08 мб. pdf)

JavaScript — интересный и эффективный язык, который широко используется в современных браузерах. Интересна также и графика на JavaScript Совместно с элементом HTML5 Canvas (холст), JavaScript дает возможность разработчику создавать непосредственно в браузере графические приложения нисколько не хуже по возможностям, чем Adobe Flash.

Представленное практическое руководство рассчитано на опытных веб-разработчиков, уже работавших с JavaScript и желающих познакомиться с графическими и анимационными возможностями программирования на этом языке для создания аркадных игр, эффектов DHTML и т. д.

В книге затрагиваются такие темы: использование элемента Canvas, повышение производительности за счет оптимизации и многократного использования кода, работа с API и диаграмм Google (Google Charts), математические функции в графике и анимации, использование jQuery и графических плагинов (модулей), применение PhoneGap (установка, настройка, использование) для преобразования веб-приложения в нативное приложение Android. Все темы сопровождаются доступными и понятными для усвоения фрагментами кода.
ISBN 978-5-4461-0034-7
Оглавление книги.

Глава 1. Многократное использование кода и его оптимизация 17
Чтобы все работало быстро 20
Что и когда оптимизировать 21
Ремесло профилирования кода 23
Оптимизация JavaScript 24
Таблицы поиска 24
Побитовые операторы, целые числа и двоичные числа 28
Оптимизация с помощью jQuery и взаимодействие с объектной моделью документа 37
Оптимизация изменений таблиц стилей CSS 38
Оптимизация вставок в DOM-дерево 40
Дополнительные источники 41

Глава 2. Принципы работы с DHTML 42
Создание DHTML-спрайтов 42
Анимация при работе с изображениями 43
Инкапсуляция и абстракция рисования (скрывание содержимого) 45
Сведение к минимуму вставок и удалений в DOM-дереве 45
Код спрайта 45
Простое приложение со спрайтом 47
Более динамическое приложение со спрайтами 49
Преобразование в плагин jQuery 53
Таймеры, скорость и кадровая частота 57
Работа с setlnterval и setTimeout 57
Точность таймера 59
Достижение устойчивой скорости 60
Кэширование фоновых изображений в Internet Explorer 6 64

Глава 3. Прокрутка 66
Эффекты прокрутки только с применением CSS 66
Прокрутка с применением JavaScript 70
Фоновая прокрутка изображений 70
Плиточная прокрутка изображений 73

Глава 4. Продвинутый пользовательский интерфейс 91
Формы HTML5 91
Использование библиотек JavaScript для работы с пользовательским интерфейсом 93
Применение библиотеки jQuery UI для создания улучшенных веб-интерфейсов 94
Применение библиотеки Ext JS для программирования пользовательских интерфейсов, рассчитанных на интенсивные нагрузки 97
Создание элементов пользовательского интерфейса с нуля (создание трехмерной карусели) 101
Описание карусели 102
Загрузка изображений карусели 104
Объекты элементов, образующих карусель 106
Объект-карусель 108
Роль плагина jQuery 110
Макет страницы с каруселью 111

Глава 5. Введение в программирование игр на JavaScript 114
Обзор игровых объектов 115
Игровой код 117
Переменные, действующие во всей игре 117
Считывание клавиш 118
Перемещаем все подряд 120
Простой аниматор 121
Обнаружение соударений 122
Монстры 128
Игрок 134
Щиты 137
Летающая тарелка 138
Игра 139
Все вместе 143

Глава 6. Холст HTML5 147
Поддержка Canvas 148
Растровая графика, векторная графика или и то и другое? 148
Ограничения, связанные с холстом 149
Сравнение холста и масштабируемой векторной графики (SVG) 150
Сравнение холста и Adobe Flash 150
Инструменты для экспорта холста 151
Основы рисования на холсте 153
Элемент Canvas 153
Рисовальный контекст 154
Отрисовка прямоугольников 155
Отрисовка путей с применением линий и кривых 155
Отрисовка растровых изображений 162
Цвета, обводки и заливка 164
Анимация при работе с холстом 169
Холст и рекурсивное рисование 172
Макет страницы с деревом, нарисованным на холсте 174
Замена спрайтов DHTML на спрайты холста 175
Новый объект CanvasSprite 175
Другие изменения в коде 176
Графическое приложение для чата с применением холста и WebSockets 177
Преимущества WebSockets. 177
Поддержка WebSockets и безопасность 179
Приложение для обмена мгновенными сообщениями 179

Глава 7. Использование векторов в играх и компьютерных моделях 192
Операции с векторами 195
Сложение и вычитание 195
Масштабирование 196
Нормализация 196
Вращение 196
Скалярное произведение 197
Создание векторного объекта JavaScript 197
Моделирование пушечной стрельбы с применением векторов 199
Переменные, общие для всего процесса моделирования 200
Ядро 201
Пушка 202
Фон 203
Основной цикл 204
Макет страницы 204
Моделирование ракеты 206
Объект игры 207
Объект-преграда 208
Объект-ракета 209
Фон 212
Обнаружение соударений и реагирование на них 212
Код страницы 215
Возможные улучшения и модификации 217

Глава 8. Визуализации с применением Google 218
Ограничения 220
Словарь терминов 221
Графические диаграммы 222
Форматы данных и разрешение диаграмм 224
Использование динамических данных 228
Резюме 232
Интерактивные диаграммы 233
События в интерактивных диаграммах 237
Получение информации о событиях 238

Глава 9. Работа с небольшим экраном: использование jQuery Mobile 242
jQuery Mobile 243
TilePic: веб-приложение для мобильных устройств 245
Описание игры TilePic 245
Код игры TilePic 247
PhoneGap 257

Глава 10. Создание приложений для Android с применением PhoneGap 259
Установка PhoneGap 260
Установка Java JDK 260
Установка Android SDK 261
Установка Eclipse 262
Установка инструментов для разработки в Android 263
Установка PhoneGap 264
Создание проекта PhoneGap в Eclipse. 264
Изменение файла App.java 265
Изменение файла AndroidManifest.xml 266
Создание и тестирование простого веб-приложения 268
Тестирование приложения TilePic 269

Скачать книгу бесплатно4,08 мб. pdf