Графика и мультимедия в HTML5

Мультимедия в HTML5 Canvas 3D (WebGL) SVG Video Audio

Canvas Canvas (англ. canvas «холст») набор API для создания и управления растровой графикой при помощи JavaScript.

Появление Canvas Придумано Apple в 2004, как компонент в движке WebKit Mac OS для приложений Dashboard и Safari Предложено W3C в качестве стандарта Широко поддерживается современными браузерами

Поддержка Canvas Имитация: через VML ExplorerCanvas, через Flash fxCanvas.ExplorerCanvasfxCanvas

Особенности Canvas Растровый, а не векторный не масштабируется Работает через JavaScript ограниченная доступность Плоская картинка отсутствие содержимого Изменения требуют полной перерисовки Не используются плагины Экспорт в статичный файл

Варинты использования Визуализация данных

Варинты использования Анимированная графика

Варинты использования Веб-приложения

Варинты использования Игры

Canvas. Использование if (Modernizr.canvas) { alert("Будем рисовать!") } else { alert("Canvas не поддерживается!") }

2D контекст отрисовки var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");

2D контекст отрисовки Конечный автомат Состояние можно сохранить и восстанавливить (save/restore) 1.Установка состояние (цвет, трансформация и т.д.) 2.Рисование (линии, примитивы)

Стандартная система кординат

Canvas API

Прямоугольник ctx.fillStyle = "rgb(65, 60, 50)"; ctx.fillRect(25, 50, 100, 100); ctx.strokeStyle = "rgb(65, 60, 50)"; ctx.strokeRect(130, 500, 40, 70);

Круг ctx.fillStyle = "rgb(65, 60, 50)"; ctx.beginPath(); ctx.arc(100, 100, 30, 0, Math.PI * 2, true); ctx.fill();

Кривые ctx.strokeStyle = "rgb(65, 60, 50)"; ctx.beginPath(); ctx.moveTo(50, 100); ctx.bezierCurveTo(70, 50, 130, 150, 150, 100); ctx.stroke();

Рисование линий ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.stroke();

Изображения var image = new Image; image.onload = function () { context.drawImage(image, x, y); }; image.src = "graffiti.jpg";

Изображения ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

Работа с пикселями ctx.createImageData() ctx.getImageData(sx, sy, sw, sh); ctx.putImageData()

Работа с пикселями var imgd = context.getImageData(x, y, width, height); var pix = imgd.data; // Инвертация цвета for (var i = 0, n = pix.length; i < n; i += 4) { pix[i] = pix[i]; pix[i+1] = pix[i+1]; pix[i+2] = pix[i+2]; // i+3 - альфа канал } context.putImageData(imgd, x, y);

Примеры Ambilight Pixelate Video Destruction

Текст ctx.font = 'bold 7em "PT Sans", sans-serif'; ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; ctx.textAlign = 'center'; ctx.textBaseline = 'top'; ctx.fillText('Ололо', 290, 330);

Наложение (Compositing). ctx.globalAlpha = 0.38; ctx.globalCompositeOperation = "source-over";

Тени (Shadow API) context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur = 4; context.shadowColor = 'rgba(255, 0, 0, 0.5)'; context.fillStyle = '#00f'; context.fillRect(20, 20, 150, 100);

Градиенты var g1 = context.createLinearGradient(sx, sy, dx, dy); g1.addColorStop(0, '#f00'); g1.addColorStop(0.5, '#ff0'); gradient1.addColorStop(1, '#00f'); var g2 = context.createRadialGradient(sx, sy, sr, dx, dy, dr);

Трансформация. ctx.scale(x, y) ctx.rotate(rad) ctx.translate(x, y) ctx.transform/setTransform(a,b,c,d,e,f) y x y x 0

Анимация Нет встроенной поддержки анимации Способы: – setInterval() – requestAnimationFrame()

Достоинства и недостатки Сравнение с flash

Фреймфорки

Ссылки Canvas Cheat Sheet

3D Canvas (WebGL) WebGL – JavaSript API для создания интерактивной 3D графики Спецификация разработана Khronos Group /latest/ /latest/

WebGL

Возник из экспериментов над Canvas Спецификация версии 1.0 была выпущена 3 марта 2011 года Использует контекст HTML5 Canvas Построен на основе OpenGL ES 2.0OpenGL ES Код на WebGL выполняется с помощью видеокарты Игры, 360°-обзоров товаров, трёхмерные графики

WebGL контекст var canvas = document.getElementById("glCanvas"); var gl = canvas.getContext("experimental-webgl"); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);

WebGL

WebGL. Вектор атаки

Поддержка WebGL

Библиотеки SpiderGL Three.js PhiloGL GLGE

SVG SVG (масштабируемая векторная графика) XML-подобный язык для визуального описания векторной графики

SVG Разрабатывается W3C с 1999 года В основу легли языки разметки VML (Microsoft) и PGML (Adobe, IBM)VMLPGML Особенности: – декларативный – векторный масштабируется – текстовый доступен * – поддерживает CSS, обработку событий и анимацию

SVG и Canvas. Область применения

Поддержка SVG

SVG. Пример

Возможности SVG Описание путей (path) – M (англ. moveto переместить) – L (англ. lineto нарисовать линию) – отрезки прямых (H, V), кривые Безье (C, S, Q, T) и дуги (A) Примитивы (многоугольники, окружности и т. п.) Визуальные свойства (окраска, прозрачность, скругление углов и т. д)

Возможности SVG Интерактивность. На каждый элемент можно повесить обработчик событий Анимация – реализована с помощью языка SMIL или CSS TransformSMIL – пример: спиннер, гипножабаспиннергипножаба Скрипты. SVG имеет ту же DOM – пример: Inbox AttackInbox Attack

Ссылки Raphaël - Swiffy (SWF to HTML5) - wiffy/ wiffy/

HTML5 video HTML5 video элемент, включённый в проект спецификации HTML 5, который используется для воспроизведения видеозаписей element.html element.html

HTML5 video (audio) Не нужно никаких дополнительных кодеков, установленных программ или кода Набор воспроизводимых форматов ограничен Спецификация не предоставляет описания, как должны выглядеть элементы управления

Поддержка HTML5 video

HTML5 video. Использование

Видео-форматы Ogg Theora – открытый, разработан Xiph.Org H.264 – лицензируемый стандарт, патентные отчисления за использование, эффективнее по соотношению качество/битрейт WebM (VP8)– открытый, разработан Google

Поддержка форматов видео ogg/theora++-+- H WebM++-+-

Поддержка форматов аудио ogg/vorbis++-+- mp wav++-++ AAC+-+-+

HTML5 Video Атрибуты: – poster – height/width – loop – preload Методы управления – load() – canPlayType() – play() – pause() – addTrack()

Пример var audio = document.getElementsByTagName('audio')[0]; var play = document.getElementsByClassName('play')[0]; play.addEventListener('click',function(e){ var t = e.target; if (audio.paused) { audio.play(); t.innerHTML = 'pause'; } else { audio.pause(); t.innerHTML = 'play'; } e.preventDefault(); });