21 Работа с графикой и медиафайлами на стороне клиента

В этой главе рассказывается о том, как манипулировать изображениями, управлять аудио- и видеопотоками и рисовать графику. В разделе 21.1 описываются традиционные приемы реализации визуальных эффектов на языке JavaScript, таких как смена изображений, когда одно статическое изображение сменяется другим при наведении указателя мыши. В разделе 21.2 описываются элементы <audio> и <video>, определяемые стандартом HTML5, и их прикладные интерфейсы в языке JavaScript.

После первых двух разделов, посвященных работе с изображениями, аудио- и видеопотоками, будет рассказано о двух мощных технологиях рисования графических изображений на стороне клиента. Способность воспроизводить на стороне клиента сложные графические изображения имеет важное значение по нескольким причинам:

• Объем программного кода, создающего изображение на стороне клиента, обычно много меньше, чем объем самого изображения, что позволяет сберечь существенную долю полосы пропускания.

• Динамическое создание графических изображений потребляет существенные ресурсы центрального процессора. Переложив эту задачу на клиента, можно существенно снизить нагрузку на сервер и немного сэкономить на стоимости аппаратных средств для него.

• Создание графики на стороне клиента прекрасно согласуется с положениями современной архитектуры веб-приложений, в которой серверы поставляют данные, а клиенты управляют представлением этих данных.

В разделе 21.3 описывается Scalable Vector Graphics, или SVG. SVG - это язык разметки, основанный на языке XML, предназначенный для описания графических изображений. Изображения на языке SVG можно создавать и изменять в сценариях на языке JavaScript с использованием модели DOM. В заключение в разделе 21.4 мы познакомимся с элементом <canvas>, определяемым стандартом HTML5, и его обширным прикладным интерфейсом на языке JavaScript, обеспечивающим возможность создания графических изображений. Элемент <canvas> является революционной технологией, и он подробно описан в этом разделе.