Мультимедиа в HTML5

В истории всемирной сети каждый очередной виток перехода на новый уровень развития начинался с какого-нибудь технологического нововведения. Когда в HTML добавился элемент img , это в корне изменило облик сети. Затем введение Javascript сделало ее более динамичной и интерактивной. Чуть позже появился Ajax, что открыло возможности для создания в сети полноценных приложений.

Современные веб-стандарты настолько продвинуты, что сейчас можно создать почти что угодно, используя лишь возможности HTML, CSS и Javascript. Почти что угодно.

В спецификациях этих стандартов все еще есть пробелы. Так, если вы хотите связать страницу с текстом и картинками, вы вполне обойдетесь HTML и CSS. Но если вам нужно опубликовать аудио или видео, тут неизбежно придется обратиться к сторонним технологиям — Flash или Silverlight.

Эти технологии — «плагины», эдакие «затычки», заполняющие «дыры» в сети. Они делают относительно простой публикацию игр, фильмов и музыки онлайн, но они не открыты и принадлежат и контролируются частными компаниями. Да, тот же Flash — мощный инструмент, но его применения в какой-то мере схоже со сделкой со злыми силами: мы получаем новые, недоступные другим путем, возможности, но взамен теряем часть свой независимости.

HTML5 призван восполнить этот недостаток. В данный момент он вступает в прямую конкуренцию с собственническими технологиями, вроде Flash и Silverlight, и главное его преимущество в этой борьбе — ему не требуется плагины, так как его мультимедиа-возможности «вшиты» в браузеры.

Canvas

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

И тут приходит элемент canvas , предназначенный для создания динамически изменяемых изображений.

Сам по себе он очень прост. Все, что вы указываете в параметрах тега — это размеры холста:



<canvas id="my-first-canvas" width="360" height="240"></canvas>


Как видно, тег этот парный. Но то, что вы поместите внутри его, предназначено только для браузеров, которые этот элемент не поддерживают:



<canvas id="my-first-canvas" width="360" height="240">
<p>No canvas support? Have an old-fashioned image instead:</p>
<img alt="image HTML5" src="
http://pixelcom.crimea.ua/puppy.jpg" alt="a cute puppy">  </canvas>


image HTML5

Пользователи браузеров без поддержки
canvas увидят фотку милого щенка.

Вся работа по отрисовке возлагается на Javascript. Перво-наперво, надо указать, с каким элементом мы работает и в каком контексте. «Контекст» в данном случае — это API, и он на сегодняшний день всего один — двухмерный (как видно, есть куда расти):



var canvas = document.getElementById('my-first-canvas'
var context = canvas.getContext('2d');


Теперь мы можем начать рисовать на этом двухмерном холсте элемента canvas , используя APIб задокументированный в спецификации HTML5 .

Набор инструментов здесь схож с тем, что вы найдете в любом графическом редакторе вроде Illustrator-а: линии, заливки, градиенты, тени, фигуры, кривые Безье. Разница лишь в том, что вместо рисования мышкой, нужно пользоваться командами в Javascript.

HTML5 Часть 2 Рисование кодом

Так цвет линий делается красным:



context.strokeStyle = '#990000';


Теперь все, что вы нарисуете, будет иметь красную обводку. К примеру, синтаксис создания прямоугольника выглядит так:



strokeRect ( left, top, width, height )


Если вы хотите сделать этот прямоугольник высотой 50 пикселей, шириной 100, и расположить его на 20 пикселей от левого края элемента canvas и на 30 от верхнего, написать нужно следующее:



context.strokeRect(20,30,100,50);


image

Прямоугольник, нарисованный командами JS в canvas -е.

Конечно, это элементарный пример. Двухмерный API включает множество разных методов: fillStyle, fillRect, lineWidth, shadowColor и еще много других.

Теоретически, любое изображение, которое можно создать в том же Иллюстраторе, может быть точно так же создано при помощи элемента canvas . На практике, впрочем, это может оказаться довольно трудоемко и даст на выходе огромное количество кода. С другой стороны, это и не совсем то, для чего был canvas придуман.

И для чего же тогда? Какой с него толк?

Это здорово, что используя Javascript и canvas , можно создавать векторные изображения на лету, но если они делаются сколько-нибудь сложными, эта работа не будет оправдывать себя.

Смысл и главная фича canvas -а заключаются в том, что его содержимое можно динамически обновлять, отрисовывая новые элементы в ответ на действия пользователя. Эта его способность реагировать на события, инициируемые посетителем страницы, делает возможным создание таких инструментов и игр, которые раньше требовали ли бы применения сторонних технологий, вроде Флеша.

Одним из первых примеров возможностей canvas -а стал проект Bespin от Mozilla Labs приложение, являющееся простым текстовым редактором для кодинга, которое работает в окне браузера.

image HTML5

Веб-приложение Bespin , созданное при помощи элемента canvas

Это очень мощная вещь. Она впечатляет. Но также, она хорошим пример того, что не надо делать с canvas -ом.

Доступ запрещен

Текстовой редактор, по своей сути, предназначен для работы с текстом. Bespin успешно работает с текстом внутри элемента canvas , с одной только оговоркой это уже не текст. Это просто набор векторных форм, похожих на него.

Каждая страница в сети может быть описана с помощью DOM Document Object Model, «объектная модель документа». DOM может включать в себя много разных «узлов», самые важные из них элементы, атрибуты и текстовые объекты. Этих трех видов «кирпичиков» достаточно, чтобы построить практически любую страницу, какую вы только себе можете представить. В свою очередь, элемент canvas не имеет DOM его содержимое нельзя разделить на отдельные части и представить как дерево узлов.

Устройства для чтения с экрана и другие технологии для схожих задач основываются на возможности анализа DOM для понимания структуры и смысла документа. Нет DOM нет доступа.

Такая «изолированность» canvas -а большая проблема для HTML5. К счастью, кое-какие умные люди работают над ее решениями . Так как этот момент довольно серьезен, я не хочу торопить процесс, но в то же время не хочется, чтобы это тормозило развитие остальной части спецификации.

Умный холст

Исходя из вышеизложенного, можно предположить, что на данный момент веб-дизайнерам нет смысла применять canvas в своих проектах. Это не так.

Когда я использую Javascript на своем сайте, он выполняет исключительно роль дополнительного улучшения. Те посетители, у которых он отключен, не будут лишены доступа к информации, разве что только определенных второстепенных удобств. Такой многоуровневый подход под названием «Ненавязчивый Javascript» может быть так же применен и к canvas -у. Вместо создания нового контента, он будет использоваться для лучшего представления уже имеющегося.

Допустим, у вас есть таблица с каким-то данными. Вы хотите проиллюстрировать наблюдающуюся в них тенденцию при помощи графика. В случае если данные статичны можно просто сгенерировать график-картинку, используя Google Chart API, к примеру. Но если данные можно изменять по ходу дела, то было бы здорово создать график, который каждый раз отрисовывается по новой с учетом изменений. Canvas здесь отлично подойдет можно использовать Javascript для извлечения содержимого элемента table и создания на его основе математически рассчитанной иллюстрации.

Умные ребята из Filament Group даже разработали для этого плагин к jQuery , кстати говоря.

image HTML5

Примеры графиков, сгенерированных при помощи canvas

Есть и другой вариант. На самом деле, элемент canvas не единственный API для генерации динамических изображений. SVG Scalable Vector Graphics, масштабируемая векторная графика XML формат, который может использоваться для описания тех же фигур, что и canvas . И исходя из сути XML как такового, содержимое SVG теоретически «понимаемо» для устойств для чтения с экрана.

Но на практике, SVG не произвел исключительного впечатления на разработчиков, в отличие от canvas , который, хоть и появился совсем недавно, уже широко поддерживается доступными браузерами. Его возможности даже реализуемы в IE, при помощи дополнительной Javascript-библиотеки .

Учитывая лозунги WHATWG про то, что надо «мостить натоптанные тропы» и «не изобретать велосипед», может показаться странным, что они предпочли включить canvas в HTML5, когда уже существует аналогичная технология SVG. Как это часто происходит, спецификация HTML5 на самом деле лишь документирует многое из того, что уже поддерживается браузерами. Canvas не был придуман для HTML5 он впервые появился в Safari и был создан Apple. Когда разработчики других браузеров увидели эту идею, она им понравилась и была скопирована.

Это может показаться слегка бессистемным и неорганизованным, но факт так рождаются многие наши стандарты. Взять хотя бы лежащий в основе Ajax объект XMLHttpRequest , впервые реализованный еще в конце прошлого века в Microsoft Internet Explorer 5.

В мире браузеров, где выживает наиболее приспособленный, canvas в данный момент набирает силу и популярность. Как только он станет более «открытым» для доступа извне, его позиции будут надежно закреплены.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>