реферат

Чтобы нарисовать изображение на холсте, у вас должно быть изображение. Это может быть существующий элемент <img> или можно создать объект Image() через JavaScript. В любом случае нужно убедиться, что изображение полностью загружено, прежде чем начинать его рисовать на холсте.

Например,

var image = new Image(); image.onload = function()

{

context.drawImage(image, 10, 10);

}

image.src = ‘myImage.jpg’;

Особенностью изображений, расположенных на Canvas, является возможность их масштабирования.

drawImage(image, x, y, width, height)

В этой функции параметры width, height позволяют изменять ширину и высоту изображения соответственно.

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) может «срезать» часть изображения и отобразить «слайс» на странице.

var canvas = document.getElementById("picture"); var ctx = canvas.getContext('2d');

var img = new Image(); img.src = "path-to/ff.png"; img.onload = function(){

ctx.drawImage(img, 300, 100);

ctx.drawImage(img, 20, 39, 170, 140, 13, 15, 171, 142);

}

Рис. 10. «Слайс» изображения

10

Пиксельное рисование

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

Пиксели хранятся в объектах типа ImageData. Каждый объект имеет три свойства: width, height и data. Свойство data имеет тип CanvasPixelArray и содержит массив элементов размером width*height*4 байт; это означает, что каждый пиксель содержит цвет в формате RGBA. Пиксели упорядочены слева направо, сверху вниз, построчно.

Чтобы лучше понять этот механизм, рассмотрим пример отрисовки блока из красных пикселей:

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 channel

pix[i+3] = 127; // alpha channel

}

context.putImageData(imgd, 0, 0);

С помощью пиксельного рисования можно инвертировать биты цветов изображения

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]; // красный канал pix[i+1] = 255 - pix[i+1]; // зеленый канал pix[i+2] = 255 - pix[i+2]; // синий канал

// i+3 - номер элемента, содержащий альфа канал

}

context.putImageData(imgd, x, y);

Рис 11. Инвертирование цвета

11

Использованная литература

1.http://w3pro.ru/article/html-5-canvas-dlya-nachinayushchikh

2.http://htmlbook.ru/html5/canvas

3.http://www.html5canvas.ru/

4.http://xhtml.co.il/ru/HTML5/Рисуем-с-JavaScript

12