НОУ ИНТУИТ | Перспективные технологии и языки веб-разработки. Лекция 3: Практическое введение в HTML 5. Создание собственного видео-плеера на HTML5 Video

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 04.07.2012 | Доступ: свободный | Студентов: 2121 / 182 | Оценка: 4.08 / 3.69 | Длительность: 21:39:00

Темы: Интернет-технологии, Программирование

Специальности: Разработчик интернет-проектов

|

Вам нравится? Нравится 48 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Аннотация: Цель работы: практическое знакомство с новыми возможностями разметки в в HTML5. Изучение графических и мультимедийных возможностей HTML5

Ключевые слова: vector graphics, расширяемый язык разметки XML, WebMatrix

Теоретический материал

Графика в HTML5

С помощью HTML5 веб-разработчики или веб-дизайнеры могут существенно расширить взаимодействие веб-страницы с пользователем, поскольку не требует установки подключаемых модулей. В настоящее время графика поставляется преимущественно браузером. Использование Internet Explorer 9 позволяет существенно повысить эффективность Microsoft Windows и графики с аппаратным ускорением.

Масштабируемая векторная графика SVG

SVG (Scalable Vector Graphics) - язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику. Не поддерживает описание трёхмерных объектов

Язык SVG используется для описания масштабируемой векторной графики, которая представляет собой модель графики, работающей в отложенном режиме, сохраняется в памяти модели и управляется посредством кода.

Для встраивания SVG в документ используются элементы, атрибуты и стили. Элемент <svg> также как и элемент <div> и является частью класса HTMLDocument, однако содержит дополнительный интерфейс SVGDocument, который обеспечивает больше возможностей для взаимодействия с объектами векторной графики.

Возможности языка

Path - описание путей. Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. Строка с данными задаётся атрибутом dтега path и содержит команды, закодированные набором букв и чисел. Буква определяет тип команды, а числа - её параметры (обычно координаты). Команды позволяют описывать фигуры, состоящие из отрезков прямых (L, H, V), кривых Безье (C, S, Q, T) и дуг (A). Пример, описывающий звезду из 5 линий, содержит строку данных с командами M (moveto - переместить) и L (lineto - нарисовать линию), содержащими в качестве аргументов координаты точек по X и Y.
```
<path fill="none" 
   stroke="black" 
   d="M 227 239 L 328 90 L 346 250 L 201 124 L 410 150 L 228 238" 
/>
```
Описание основных геометрических фигур (многоугольники, прямоугольники, окружности и т. п.).
Широкий спектр визуальных свойств, которые можно применить к фигурам и путям: окраска, прозрачность, скругление углов и т. д.
Интерактивность. На каждый отдельный элемент и на целое изображение можно повесить обработчик событий (клик, перемещение, нажатие клавиши и т.д), таким образом, пользователь может управлять рисунком (например - перемещать мышкой некоторые элементы[1]).
Анимация и сценарии. С помощью ECMAScript или JavaScript можно описывать даже самые сложные сценарии, связанные с математическими вычислениями координат и пропорций фигур. Вместе с интерактивностью и анимацией это дает очень широкие возможности для разработчиков веб-графики.

Рассмотрим в качестве примера следующий SVG элемент:

<!DOCTYPE html>
<html lang="en">
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <circle cx="170" cy="80" r="55" stroke="blue" stroke-width="2" fill="lime"/>
        </svg>     
    </body>
</html>

Собственно SVG код начинается с элемента <svg>. Это корневой элемент. атрибут xmlns определяет пространство имен SVG.

Элемент <circle> используется для рисования круга. Атрибуты сх и су определяют координаты х и у центра круга. Если сх и су опущены, центр круга устанавливается в точке (0, 0). Атрибут r определяет радиус окружности.

Атрибуты stroke и stroke-width описывают контур фигуры. В данном примере контур имеет ширину 2px и синий цвет. Атрибут fill задает цвет заполнения круга.

Элемент SVG заканчивается тегом </svg> .

Помимо прорисовки геометрических фигур SVG также предоставляет широкие возможности для геометрических трансформаций и визуальных 2D эффектов.

Рассмотрим следующий пример.

<!DOCTYPE html>

<html>
  <body>

    <svg height = "360px"  width = "360px">
       <rect x="0" y="0" 
          width="360" height="360" 
          fill="none" stroke="black" 
          stroke-width="5px" stroke-opacity="0.3"/>
       <g fill-opacity="0.6" stroke="black" stroke-width="0.5px">
        <circle cx="180" cy="180" r="90" 
            fill="red"   transform="translate(0,-45)"/>
        <circle cx="180" cy="180" r="90" 
            fill="blue"  transform="translate(50,45)"/>
        <circle cx="180" cy="180" r="90" 
            fill="green" transform="translate(-50,45)"/>
       </g>
    </svg>

  </body>
</html>

Здесь используются геометрические фигуры (3 круга), операция сдвига (translate), заливка с атрибутом прозрачности (fill-opacity и stroke-opacity) и группировка элементов с помощью элемента <g>.

Элемент Canvas

Альтернативный метод заключается в предоставлении пользователям богатой графики с помощью элемента <canvas>. Он предоставляет в большей степени программируемое взаимодействие для прорисовки графики, работающей в мгновенном режиме, включая прямоугольники, контуры и изображения, аналогичные SVG. В canvas отображаемые графические объекты не сохраняются. Независимо от фактических изменений разработчику потребуется повторно вызвать все команды рисования, необходимые для описания всей сцены каждый раз, когда потребуется новый кадр.

Для использования возможностей элемента canvas веб-разработчику необходимо представить этот элемент:

<canvas  id="idCanvas" width="500px" 
      height="300px">
</canvas>

Для манипуляций с графическими объектами в canvas используется код JavaScript, который знаком веб-разработчикам и обеспечивает поддержку графики.

var canvas = document.getElementById("idCanvas");
var ctx = canvas.getContext("2d");

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

ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(10, 10, 100, 100);

Сравнение технологий Canvas и SVG

В следующей таблице приведены сравнительные характеристики Canvas и SVG, которые можно использовать для определения предпочтений относительно использования какой-либо из двух технологий создания векторной графики.

Canvas	SVG
Основана на пикселях (динамический png-файл)	Основана на фигурах
Один элемент HTML	Несколько графических элементов, которые становятся частью модели DOM
Изменяется только с помощью сценариев	Изменяется с помощью сценариев и CSS
Модель событий и взаимодействие с пользователем основаны на пикселях (x,y)	Модель событий и взаимодействие с пользователем являются абстрактными (прямоугольник, контур)
Производительность выше на небольших поверхностях, при большом числе объектов (> 10 000) или для обоих условий	Производительность выше на больших поверхностях, при небольшом числе объектов (< 10 000) или для обоих условий

Дальше >>

Авторизоваться

Перспективные технологии и языки веб-разработки

Практическое введение в HTML 5. Создание собственного видео-плеера на HTML5 Video