Узоры в CSS3

Узоры — это очень простое усовершенствование, которое, однако, позволяет сделать пути намного привлекательнее. С помощью узоров можно добавлять текстуру создаваемым на холсте фигурам. Процедура добавления аналогична работе с градиентами: нужно создать узор с помощью метода 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() и другими фигурами.