168 • Глава 5
С узорами еще проще. Вам нужен только источник; элемент
источника передается методу
createPattern
, а результат используется в методе
fillStyle
. Помнить нужно только о том,
что для правильного захвата изображений и видео элемент источника должен сначала
полностью загрузиться.
Чтобы
создать эффект, показанный на рис. 5.8 (копии изображений, уложенные плиткой
по всей площади холста), сначала растяните холст по размеру окна. Затем динамически
создайте изображение и, когда сработает событие загрузки, примените изображение в ка-
честве источника повторяющегося узора:
var canvas = document.querySelector('canvas'),
img = document.createElement('img'),
ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
img.onload = function () {
ctx.fillStyle = ctx.createPattern(this, 'repeat');
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
img.src = 'remysharp_avatar.jpg';
Рис . 5 .8 .
Укладываем изображение на холсте с
помощью метода createPattern
Достарыңызбен бөлісу: 
