2D графика в HTML

С подачи браузера Safari от Apple в пятый стандарт HTML был добавлен элемент canvas(холст) для вывода графики и создания простой анимации. В большинтсве случаев это хорошая альтернатива закрытой технологии Flash. В будущем планируется поддержка трехмерной графики на основе OpenGl.

Для краткости в описаниях методов я опустил возвращаемый тип void и типы аргументов. Координаты и размеры задаются числом с плавающей точкой (float).

контекст вывода

В первую очередь необходимо получить непосредственно объект вывода соответствующий элементу canvas. Для этого у последнего определен метод getContext. На случай если браузер не поддерживает холст вообще как IE или только отдельные методы, например метод fillText доступен в FF с версии 3.1, код вывода лучше заключить в блок try.

<canvas id="canva" width="150px" height="150px"></canvas>
<script type="text/javascript">
//<![CDATA[ 
var canvas = document.getElementById('canva');
var ctx;

// код вывода
try{
ctx = canvas.getContext('2d');
ctx.fillStyle ="#0000fa";
ctx.fillRect(50,50,30,60);
ctx.fillStyle ="#00ff00";
ctx.fillText("Hello World", 10, 25); 
}catch(e){	
}
//]]>
</script>

перо и кисть

Перо для вывода контуров, кисть для закраски. Стиль пера определяется атрибутом strokeStyle, а стиль кисти атрибутом fillStyle. В качестве значений может выступать строка, содержащая css определение цвета, или объект, создаваемый одним из следующих методов:

• createLinearGradient(x1,y1,x2,y2) - создание объекта линейного градиента;
• createRadialGradient(x1,y1,r1,x2,y2,r2) - создание объекта радиального градиента;
• createPattern(image,type) - шаблон закраски, аргумент type может принимать следующие значения:
  • repeat - повторять шаблон;
  • repeat-x - повторять шаблон по x;
  • repeat-y - повторять шаблон по y;
  • no-repeat - не повторять шаблон.

прозрачность

Кроме прозрачности в значении цвета, есть возможность определить глобальное значение прозрачности через свойство globalAlpha. Значение 0 - полная прозрачность, значение 1.0 - полная не прозрачность.

четырехугольники

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

• fillRect(x,y,width,height) - закрашенный четырехугольник;
• strokeRect(x,y,width,height) - контур четырехугольника;
• clearRect(x,y,width,height) - очистка четырехугольника.

контуры

Для работы с контуром определены следующие методы:

• beginPath() - начать сложный контур;
• closePath() - завершить сложный контур;
• moveTo(x, y) - переместить текущие координаты пера;
• lineTo(x, y) - вывести линию от текущих координат до указанных;
• stroke() - обвести контур пером;
• fill() - закрасить контур кистью;
• quadraticCurveTo(cp1x, cp1y, x, y) - кривая второго порядка;
• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) - кривая Безье;
• arc(x, y, radius, startAngle, endAngle, anticlockwise) - вывод дуги;
• arcTo(x1,y1,x2,y2,radius) - добавляет к контуру дугу;
• rect(x, y, width, height) - вывод четырехугольника;
• clip() - добавляет область текущего контура к текущей области отсечения операцией пересечения. Область отсечения - область в которой возможен вывод;
• boolean isPointInPath(x,y) - определяет, находится ли точка внутри контура.

стиль линии

Стиль линии задается следующими свойствами и методами:

• lineWidth - ширина линии;
• lineJoin - определяет как соединяются линии. Может принимать одно из следующих значений:
  • round - окгруглением;
  • bevel - скосом;
  • miter - сглаживанием, значение по умолчанию;

изображения

Можно использовать любые изображения или холсты определенные на страницы. Для их доступа можно воспользоваться обычными DOM средствами как коллекция изображений (document.images), методы getElementsByTagName и getElementById.

Другой вариант - создание изображения прямо в скрипте

var img = new Image();   // объект изображения   
img.onload = function(){/* выводим изображение на холст если нужно*/}  
img.src = "myimg.png"; // указываем адрес изображения  

Также позволяются изоражения внедренные механизмом data: url

var img = "data:image/gif;base64, ...данные изображения...";

Имея изображения, его можно вывести на холст одним из следующих методов:

• drawImage(img, x, y) - вывод изображения;
• drawImage(img, x, y, width, height) - вывод изображения с масштабированием в указанные размеры;
• drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) - вывод части изображения с масштабированием в указанные размеры.

растровые данные

Для хранения растровых данных предусмотрен объект ImageData, имеющего всего три члена данных:

• width - ширина;
• height - высота;
• CanvasPixelArray data - массив данных.

Информация о пикселях в массиве CanvasPixelArray хранится в виде значений целых чисел от 0 до 255 в формате rgba. Для работы с растровыми данными определены следующие методы:

• ImageData createImageData(w,h) - создание растровых данных размера w*h;
• ImageData getImageData(x,y,w,h) - получить растровые данные холста в указанном прямоугольнике;
• putImageData(ImageData idata,x,y) - вывести растровые данных на холст в указанные координаты;
• putImageData(ImageData idata,x, y, sx, sy, sw, sh) - вывести часть растровых данных на холст в указанные координаты.

текст

Для вывода текста используются следующие свойства и методы:

• font - css строка параметров шрифта;
• textAlign - выравнивание текста ("start", "end", "left", "right", "center");
• textBaseline - определение базовой линии ("top", "hanging", "middle", "alphabetic", "ideographic", "bottom");
• fillText(text,x,y[, maxw]) - вывод текста в указанные координаты, с максимальной шириной maxw;
• strokeText(text, x, y[, maxw]) - вывод контура текста в указанные координаты, с максимальной шириной maxw;
• TextMetrics measureText(text) - примерная ширина указанного текста (в объекте TextMetrics есть свойство width).

преобразование координат

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

• translate(x, y) - линейный сдвиг координат;
• rotate(angle) - вращение по часовой стрелке на указанный угол в радианах;
• scale(x, y) - масштабирование;
• transform(m11, m12, m21, m22, dx, dy) - домножает текущую матрицу преобразование указанной матрицей;
• setTransform(m11, m12, m21, m22, dx, dy) - устанавливает новую матрицу преобразования.

состояние контекста

Можно сохранить в стеке текущее состояние контекста. Туда входят значения стилей и текущая матрица преобразования.

• save() - сохранить состояние;
• restore() - востановить состояние.

библиотеки

В IE существует своя технология векторной графики на основе xml формата - VML. Будет ли в будущем поддерживаться объект canvas не известно. С помощью дополнительных JavaScript библиотек уже сейчас возможна эмуляция canvas в IE, без изучения vml. Все что нужно это подключить компилированную версию библиотеки на страницу.

Другая библиотека кроме кроссбраузерности, определяет готовые методы вывода различных фигур.