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

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

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

• Три аргумента: Базовый вариант drawImage использует один аргумент для указания на включаемое изображение, и два для определения координат места назначения внутри контекста холста.
• Пять аргументов: Второй вариант использования drawImage включает приведенные выше три аргумента, плюс два для определения ширины и высоты вставляемого изображения (если вы захотите изменить его размер).
• Девять аргументов: Самый развитый вариант использования drawImage включает кроме пяти аргументов два значения для координат внутри исходного изображения, и два значения для ширины и высоты внутри исходного изображения. Эти значения позволяют динамически обрезать исходное изображение перед вставкой в контекст холста.

Следующий пример кода показывает все три типа 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.

Рис. 6.3. Пример использования drawImage

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

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

Рис. 6.4. Фильтр инверсии цвета в действии