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

В этой главе рассказывается о том, как работать с графикой из JavaScript_сцена_ риев. Она начинается с описания традиционных приемов создания визуальных эффектов, таких как смена изображений (когда одно статическое изображение сменяется другим при наведении указателя мыши). Затем рассказывается о том, как создавать собственные графические изображения. Комбинирование Java_ Script_кода и CSS_стилей позволяет рисовать вертикальные и горизонтальные линии и прямоугольники, чего обычно вполне достаточно для создания как про_ стеньких рисунков, так и сложных гистограмм.

Далее мы перейдем к рассмотрению технологий векторной графики, которые предоставляют намного более широкие возможности по созданию графических изображений на стороне клиента. Способность воспроизводить на стороне кли_ ента сложные графические изображения имеет важное значение по нескольким причинам:

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

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

• Воспроизведение графики на стороне клиента прекрасно согласуется с поло_ жениями архитектуры Ajax, в которой серверы призваны поставлять дан_ ные, а клиенты представлять эти данные.

В эту главу включено описание пяти технологий создания векторной графики, которые могут использоваться в JavaScript_сценариях на стороне клиента:

• Масштабируемая векторная графика (Scalable Vector Graphics, SVG) – это W3C_стандарт XML_подобного языка создания графических изображений. В чистом виде SVG поддерживается в Firefox 1.5, а в других броузерах мас_

штабируемая векторная графика поддерживается модулями расширения. Поскольку графические изображения в формате SVG – это XML_документы, они могут динамически создаваться в JavaScript_сценариях.

• Векторный язык разметки (Vector Markup Language, VML) – это альтернати_ ва SVG от компании Microsoft. Данная технология мало известна, хотя и до_ ступна в Internet Explorer начиная с версии 5.5. Как и в случае SVG, графиче_ ские изображения в формате VML – это XML_документы, потому они тоже могут строиться динамически на стороне клиента.

• HTML_тег <canvas> непосредственно предоставляет прикладной интерфейс (API) для рисования из JavaScript_сценариев. Впервые этот тег появился в броузе_ ре Safari 1.3, а затем перекочевал в Firefox 1.5 и Opera 9.

• Flash_плеер доступен в виде модулей расширения для подавляющего боль_ шинства основных веб_броузеров. Впервые прикладной интерфейс для рисова_ ния появился в Flash_плеере версии 6, а в версии 8 этот интерфейс был макси_ мально приспособлен для использования из клиентских JavaScript_сценариев.

• Наконец, язык программирования Java поддерживает весьма мощный при_ кладной интерфейс создания изображений и доступен во многих веб_броузе_ рах в виде модулей расширения компании Sun Microsystems. Как описывает_ ся в главах 12 и 23, JavaScript_сценарии могут вызывать методы Java_аппле_ тов, а в броузерах на базе Mozilla – вызывать Java_методы даже в отсутствие апплетов. Такая степень взаимодействия с Java позволяет JavaScript_сцена_ рию использовать на стороне клиента мощный прикладной Java_интерфейс создания графических изображений.

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