Узоры — это очень простое усовершенствование, которое, однако, позволяет сделать пути намного привлекательнее. С помощью узоров можно добавлять текстуру создаваемым на холсте фигурам. Процедура добавления аналогична работе с градиентами: нужно создать узор с помощью метода createPattern(), а затем связать его с путем, как любой другой цвет.
В createPattern(image, type) атрибут image представляет собой ссылку на изображение, а атрибут type может принимать одно из четырех значений: repeat, repeat-x, repeat-y или no-repeat.
Листинг 7.26. Добавление узора к путям на холсте
Function initiate(){
Var elem=document. getElementById(‘canvas’);
Canvas=elem. getContext(‘2d’);
Var img=new Image();
Img. src="http://www.minkbooks.com/content/bricks.jpg"; img. addEventListener("load", modimage, false);
}
Function modimage(e){ img=e. target;
Var pattern=canvas. createPattern(img,’repeat’); canvas. fillStyle=pattern;
Canvas. fillRect(0,0,500,300);
}
Window. addEventListener("load", initiate, false);
Поэкспериментируйте с другими значениями аргументов метода createPattern() и другими фигурами.
Добавить комментарий