JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:

"текущую версию и затереть версию на сервере ");

var now = Date.now;

if (useit) {

editor.value = localStorage.note = xhr.responseText;

localStorage.lastSaved = now;

status("Загружена более новая версия.");

}

else

status("Игнорируется более новая версия заметки.");

localStorage.lastModified = now;

}

else

status("Редактируется последняя версия заметки.");

if (localStorage.lastModified > localStorage.lastSaved) {

save;

}

editor.disabled = false; // Разрешить доступ к редактору

editor.focus; // И поместить в него курсор ввода

}

}

else { // В автономном режиме мы не можем синхронизироваться

status("Невозможно синхронизироваться в автономном режиме");

editor.disabled = false; editor.focus;

}

}

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> является революционной технологией, и он подробно описан в этом разделе.

21.1. Работа с готовыми изображениями

Готовые изображения могут включаться в веб-страницы с помощью тега

<img>.
Подобно любому HTML-элементу, элементом
<img>
можно управлять: присваивание нового URL-адреса свойству
sгс
заставляет броузер загрузить (если необходимо) и отобразить новое изображение. (Кроме того, можно изменять ширину и высоту изображения, заставляя броузер увеличивать или уменьшать его, но этот прием здесь не рассматривается.)

Возможность динамической замены одного изображения другим в HTML-документе открывает доступ к некоторым специальным эффектам. На практике чаще всего прием смены изображений привязывается к наведению указателя мыши на изображение. Когда изображение размещается внутри гиперссылки, смена изображения становится приглашением пользователю щелкнуть на изображении. (Аналогичный эффект можно получить с помощью псевдокласса CSS

:hover
, позволяющего изменять фоновое изображение элемента.) Следующий фрагмент разметки HTML выводит изображение, которое изменяется при наведении на него указателя мыши: