Работа с изображениями

Наклонные линии, симпатичные рожи и сердечки — это, конечно, хорошо, но работа с графикой никогда не стала бы полноценной без возможности импорта готовых изображений. Естественно, такая возможность в canvasAPI присутствует, и сейчас мы научимся ее использовать.

Чтобы работать с изображением, надо в первую очередь создать JavaScript объект Image(). Источником (src) для этого объекта может служить изображение на текущей странице, стороннее изображение, объект типа data:url или другой элемент canvas. В любом случае, в итоге мы получим искомый объект:

Var img = new Image(); img. src = ‘cat. jpg’;

Следующим шагом будет отрисовка изображения. Производится она методом drawImage(), который может быть вызван с разным набором аргументов. Самый простой случай включает сам объект Image и координаты:

Context. drawImage(img,10,10):

Правда, тут неплохо бы избежать блокирования работы скрипта на время загрузки изображения. Сделаем так:

Var img = new Image(): img. onload = function(){

Context. drawImage(img,10,10):

}

Img. src = ‘cat. jpg’;

Все, изображение будет выведено в браузер. Далее мы можем продолжить рисование:

Context. drawImage(img,10,10): context. lineWidth = 4; context. strokeStyle = ”gray”; context. fillStyle = ”rgba(0, 0, 200, 0.5)”; context. translate(14, 90): context. moveTo(275, 75): context. quadraticCurveTo(225, 75, 225,112.5): context. quadraticCurveTo(225,150,250,150): context. quadraticCurveTo(250,170,184,175): context. quadraticCurveTo(260,180,265,150): context. quadraticCurveTo(345,150,345,112.5): context. quadraticCurveTo(345,75,275,75): context. fill(): context. beginPath(): context. translate(258, 70): context. moveTo(37.5,20):

Context. bezierCurveTo(37.5,18.5,35,12.5,25,12.5): context. bezierCurveTo(10,12.5,10,31.25,10,31.25): context. bezierCurveTo(10,40,20,51,37.5,60): context. bezierCurveTo(55,51,65,40,65,31.25): context. bezierCurvec To(65,31.25,65,12.5,50,12.5):

Context. bezierCurveTo(42.5,12.5,37.5,18.5,37.5,20);

Context. fillStyle = "red";

Context. fill();

Context. beginPath();

Context. fillStyle = "red";

Context. font = "60px serif";

Context. fillText ("I", -20, 56);

Context. font = "18px serif";

Context. fillText ("Canvas too", -20, 73);

});

Img. src = ‘cat. jpg’;

Результат — на рис. 41 (вы правильно поняли, на снимке мой соавтор).

Рис. 41. Работаем с готовым изображением

В данном случае объект оставляет контексту ссылку на себя как часть пути. Такую же, как arc или rect, с самим же объектом ничего не происходит, его можно использовать для повторного вывода изображения (рис. 42):

Var img = new Image(); img. onload = function(){

Context. drawImage(img,30,30); context. drawImage(img,300,50);

Context. drawImage(img,150,90): context. drawImage(img,10,200); context. drawImage(img,320,220):

}

Img. src = ‘pimiento. png’;

Рис. 42. Размножаем изображение

Расширенный метод drawImage() включает в качестве аргумета размеры выводимого изображения по двум осям. При этом пропорции исходного изображения могут быть искажены (рис. 43).

Продолжим издеваться над животным. Полная форма drawImage() имеет следующий вид:

DrawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh);

Тут первые два параметра, после объекта Image, — это координаты левого верхнего участка на изображении (он будет вырезан), причем отчет координат производится от левого верхнего угла исходного изображения. Следующие два задают ширину и высоту «вырезки», далее следуют уже знакомые нам параметры. В следующем примере донорами для изображения поолужат две предыдущие картинки — объекты canvas (их код мы опустим):

Рис. 43. Изменяем пропорции

Var canvas = document. getElementById("canvas1"); var context = canvas. getContext("2d"); context. drawImage(document. getElementById(‘myCanvas2′),

100.88.244.200.100.60.230.204); context. drawImage(document. getElementById(‘myCanvas1′),

100.68.244.200.10.10.230.204);

}

</script>

</head>

<body>

<canvas id="myCanvas1" width="800" height="600" style="display:none"> </canvas>

<canvas id="myCanvas2" width="800" height="600" style="display:none"> </canvas>

<canvas id="canvas1" width="800" height="600">

Yoir browser does not support HTML5 Canvas.

</canvas>

</body>

</html>

Не очень вменяемый результат — на рис. 44.

Самое распространенное использование готовых изображений — это все же не коллажи, а текстуры, и в canvas API есть метод для их

Рис. 44. Простой монтаж

Применения. Сейчас мы попробуем замостить квадрат куском кота (а кому сейчас легко?):

<script>

$(function(){

Var canvas = document. getElementById(”myCanvas”); var context = canvas. getContext(”2d”); var img = new Image(): img. onload = function(){

Context. drawImage(img, 290,170,100,100,0, 0,100,100): var canvas = document. getElementById(”canvas1”); var ctx = canvas. getContext(”2d”):

Ctx. fillStyle = ctx. createPattern(document. getElementById(‘myCanvas’), ‘repeat’);

Ctx. fillRect(0, 0,600, 600):

}

Img. src = ‘cat. jpg’;

}) :

</script>

</head>

<body>

<canvas id=”myCanvas” width=”100” height=”100” style=”display:none”> </canvas>

<canvas id=”canvas1” width=”800” height=”600”>

Your browser does not support HTML5 Canvas.

</canvas>

</body>

На этот раз (рис. 45) мы используем два элемента canvas — на одном, невидимом, мы препарируем животное, вырезая нужный фрагмент из оригинальной картинки, на другом холсте мы располагаем квадрат, предварительно замощенный этим фрагментом с помощью метода g reatePattern(). Второй аргумент вместо ‘repeat’ может принимать значения ‘repeat-x’, ‘repeat-y’ и no-repeat’, которые будут работать так же, как и соответствующие значения background в CSS.

Рис. 45. Мостим холст кусочками кота

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *