Работа с изображениями
Наклонные линии, симпатичные рожи и сердечки — это, конечно, хорошо, но работа с графикой никогда не стала бы полноценной без возможности импорта готовых изображений. Естественно, такая возможность в 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. Мостим холст кусочками кота
Добавить комментарий