Холст HTML5 – основы

Вставка изображений

Метод drawImage позволяет вставлять другие изображения (элементы img и canvas ) в контекст холста. В браузере Opera можно также рисовать изображения SVG внутри холста. Это достаточно сложный метод, который получает три, пять или девять аргументов:

Следующий пример кода показывает все три типа drawImage в действии (http://www.robodesign.ro/coding/canvas-primer/20081208/example-drawimage.html):

// Три аргумента: элемент, координаты места назначения (x,y).

context.drawImage(img_elem, dx, dy);

// Пять аргументов: элемент, координаты места назначения (x,y) 
// и ширина и высота места назначения (если вы хотите изменить // размер исходного изображения).

context.drawImage(img_elem, dx, dy, dw, dh);

// Девять аргументов: координаты места назначения (x,y), 
// ширина и высота источника (для обрезки), 
// координаты места назначения (x,y), 
// ширина и высота места назначения (изменение размера).

context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

Это должно выводиться, как показано на рисунке 6.3.

Манипуляции с пикселями

API контекста 2D предоставляет три метода, которые помогают рисовать с точностью до пикселя: createImageData, getImageData, и putImageData.

Пиксели хранятся в объектах типа ImageData. Каждый объект имеет три свойства: width, height и data. Свойство data имеет тип CanvasPixelArray, имеющий количество элементов равное width*height*4 ; это означает, что для каждого пикселя определяются значения красного, зеленого, синего цветов и alpha, в том порядке, в котором они должны появиться (все значения находятся в диапазоне от 0 до 255, включая alpha!). Пиксели упорядочиваются слева направо, ряд за рядом, сверху вниз.

Чтобы лучше понять, как все это работает, рассмотрим пример, который рисует блок красных пикселей (http://www.robodesign.ro/coding/canvas-primer/20081208/example-imagedata2.html).

// Создаем объект ImageData

var imgd = context.createImageData(50,50);
var pix = imgd.data;

// Цикл по всем пикселям и задание прозрачного красного цвета

for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i ] = 255; // канал red (красный)
pix[i+3] = 127; // канал alpha 
}

// Отображение объекта ImageData в заданных координатах (x,y).

context.putImageData(imgd, 0,0);

Примечание: Не все браузеры реализуют createImageData. В таких браузерах необходимо получить объект ImageData с помощью метода getImageData. Посмотрите пример кода по следующей ссылке (http://www.robodesign.ro/coding/canvas-primer/20081208/example-imagedata2.html).

С помощью возможностей ImageData можно делать значительно больше, чем только это. Например, можно выполнить фильтрацию изображения, или можно сделать математическую визуализацию (представьте фракталы или что-то еще). Следующий код показывает, как создать простой фильтр для инверсии цвета (http://www.robodesign.ro/coding/canvas-primer/20081208/example-imagedata.html):

// Получаем CanvasPixelArray из заданных координат 
// и размеров.

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 ] = 255 - pix[i ]; // red
pix[i+1] = 255 - pix[i+1]; // green
pix[i+2] = 255 - pix[i+2]; // blue
// i+3 будет alpha (четвертый элемент)
}

// Выводим ImageData в заданных координатах (x,y).
context.putImageData(imgd, x, y);

Рисунок 6.4 показывает фильтр инверсии цвета, примененный к графическому изображению Opera (сравните с рисунком 6.3, который показывает исходную цветовую схему графического изображения Opera).

Текст

API текста доступен только в недавних сборках WebKit, и в ночных сборках Firefox 3.1, но я решил включить его здесь для полноты изложения.

На объекте context имеются следующие свойства текста:

Для отображения текста имеется два метода: fillText и strokeText.

Первый из них изображает форму текста, заполненную с помощью текущего стиля fillStyle, в то время как второй изображает контур/границу текста используя текущий стиль strokeStyle. Оба получают три аргумента: текст для вывода, и координаты (x,y), определяющие место отображения. Существует также необязательный четвертый аргумент – максимальная ширина. Это приводит к тому, что браузер, если понадобится, сжимает текст, чтобы разместить его внутри заданной ширины.

Свойства выравнивания текста влияют на положение текста относительно координат (x,y), заданных в методах отображения.

Теперь пора обратиться к практике – следующий код является примером создания на холсте простого текста "hello world".

context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText ('Hello world!', 0, 0);
context.font = 'bold 30px sans-serif';
context.strokeText('Hello world!', 0, 50);

Рисунок 6.5 показывает вывод этого примера.

Тени

API теней предоставляет четыре свойства:

Использование вполне очевидно, как показано в следующем примере кода тени холста (http://www.robodesign.ro/coding/canvas-primer/20081208/example-shadows.html):

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);

Этот код отображается, как показано на рисунке 6.6.

Градиенты

Свойства fillStyle и strokeStyle могут также иметь присвоенные им объекты CanvasGradient вместо строк цвета CSS – это позволяет использовать цветовые градиенты для окрашивания линий и заполнений вместо однородных цветов.

Для создания объектов CanvasGradient можно использовать два метода: createLinearGradient и createRadialGradient. Первый из них создает линейный градиент – линии цвета все идут в одном направлении – в то время как второй создает радиальный градиент – цветовые окружности, расходящиеся из одной точки.

Когда имеется объект градиента можно добавить опорные точки цвета вдоль градиента, используя метод объекта addColorStop.

Следующий код показывает, как использовать градиенты:

// Необходимо предоставить для градиента 
// координаты (x,y) источника и места назначения 
// (откуда он начинается и где заканчивается).

var gradient1 = context.createLinearGradient(sx, sy, dx, dy);

// Теперь можно добавить в градиент цвета.
// Первый аргумент задает позицию цвета в градиенте. 
// Диапазон допустимых значений от 0 (начало градиента) 
// до 1 (конец градиента).
// Второй аргумент сообщает требуемый цвет, 
// используя формат цвета CSS.

gradient1.addColorStop(0, '#f00'); // красный 
gradient1.addColorStop(0.5, '#ff0'); // желтый 
gradient1.addColorStop(1, '#00f'); // синий 

// Для радиального градиента также нужно задать 
// источник и радиус окружности назначения.
// Координаты (x,y) определяют центр окружности 
// (начало и окружности назначения).

var gradient2 = context.createRadialGradient(sx, sy, sr, dx, dy, dr);

// Добавление цветов для радиального градиента делается 
// как добавление цветов к линейным градиентам.

Я подготовил также более сложный пример, который использует линейный градиент, тени и текст ( http://www.robodesign.ro/coding/canvas-primer/20081208/example-gradients.html). Пример создает вывод, показанный на рисунке 6.7.

Сетевые примеры использования холста

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

Заключение

Холст является одним из наиболее интересных свойств HTML5, и он готов к использованию в большинстве современных браузеров. Он предоставляет все необходимое для создания игр, усовершенствований интерфейса пользователя, а также других вещей. API контекста 2D включает множество функций помимо рассмотренных в этой статье. Я надеюсь, что вы получили хорошее представление о возможностях холста и жажду узнать больше.