Динамическая графика

Вадим Макеев, Opera Software

Динамическая графика

Marble of Doom
GIF

SVG

Появление SVG

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

Поддержка SVG

Opera Mini — показывает статическую картинку.

Особенности SVG

31 августа 2010 года Google заявила о начале индексации SVG.

Растровый смайл
Векторный смайл

Примитивы

Шаблон

			<svg xmlns="http://www.w3.org/2000/svg"
			     xmlns:xlink="http://www.w3.org/1999/xlink">
			     
			</svg>
		

Прямоугольник

			<rect
			    x="100" y="100"
			    width="550" height="550"
			    fill="#FAFAA2" stroke="#000"
			/>
		

Исходный файл

Круг

			<circle
			    cx="100" cy="100" r="275"
			    fill="#FAFAA2" stroke="#000"
			/>
		

Исходный файл

Линия

			<line
			    x1="230" y1="570"
			    x2="640" y2="490"
			    stroke="#000"
			/>
		

А также: polyline, polygon, path, градиенты и многое другое…

Анимация

Анимация

SMIL → Synchronized Multimedia Integration Language *

Произносится как «смайл», будущее под сомнением.

Спиннер

			<rect width="50" height="150"
			    rx="25" ry="25" id="rect"/>
		
			<use x="225" y="0" xlink:href="#rect"/>
			<use x="225" y="350" xlink:href="#rect"/>
		

От винта!

Спиннер

			<animateTransform attributeName="transform"
			    type="rotate" dur="0.6s" calcMode="discrete"
			    values=" 45,250,250;  90,250,250; 135,250,250;
			            180,250,250; 225,250,250; 270,250,250;
			            315,250,250; 360,250,250"
			    repeatCount="indefinite"
			/>
		

Гипножаба

			<g transform="scale( 1, 0.2 )">
			    <circle class="glow"/>
			    <circle class="hole"/>
			    <animateTransform … "/>
			</g>
		

Все любят гипножабу

Соседи

Скрипты

Inbox Attack

Медиа-выражения

Супер-логотип

Супер-иконка

Супер-иконка

Супер-иконка

Векторный смайлик
Растровый смайлик

Canvas

Появление Canvas

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

Поддержка Canvas

Имитация: через VML ExplorerCanvas, через Flash fxCanvas.

Особенности Canvas

Не забывайте про фолбек: <canvas> Too Old </canvas>.

Примитивы

Шаблон

			<canvas id="canvas">
			    width="600" height="600"></canvas>
		
			var canvas =
			    document.querySelector('#canvas').getContext('2d');
		

Исходный файл

Примитивы

			canvas.beginPath();
			    
			canvas.closePath();
			canvas.fill();
			canvas.stroke();
		

Обратите внимание на порядок применения fill() и stroke().

Прямоугольник

			canvas.rect( 25, 25, 550, 550 );
			canvas.fillStyle = '#FAFAA2';
			canvas.strokeStyle = '#000';
			canvas.lineWidth = 50;
		

Исходный файл

Круг

			canvas.arc( 300, 300, 275, 0, Math.PI*2, true );
			canvas.fillStyle = '#FAFAA2';
			canvas.strokeStyle = '#000';
			canvas.lineWidth = 50;
		

Исходный файл

Анимация

			function draw() {
			    canvas.clearRect( 0, 0, 600, 600 );
			    canvas.arc( x, y, 100, 0, Math.PI*2, true );
			    x += 2; y += 2;
			}
		

Понеслась…

Частицы

Сияние

Бублик

Изображения

			var pepelsbey = new Image();
			    pepelsbey.src = 'pepelsbey.png';
			    pepelsbey.onload = function() {
			        canvas.drawImage( pepelsbey, 44, 44 );
			    }
		

Рисуем…

Ambilight

Текст

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

Пишем…

SVG vs. Canvas

SVG vs. Canvas

SVG — масштабируемый вектор, с содержимым
Canvas — плоская, фиксированная растровая графика

Но вообще — это длинная история…

Динамическая графика

Вадим Макеев, Opera Software

Презентация: pepelsbey.net/pres/dynamic-graphics

Powered by Shower