Несколько шаблонов изображений в 2d контексте HTML5 canvas?

Question

У меня возникают трудности при рендеринге нескольких шаблонов (каждый с разной текстурой) в 2d контексте HTML5 canvas.

Предполагается, что у меня есть три отдельных полотна, два вне экрана, содержащие различные текстуры, и одно для рендеринга. Пусть эти офлайн-холсты будут А и В.

Тогда:

var patternA = ctx.createPattern(A, "repeat-x");
ctx.fillStyle = patternA;
ctx.fillRect(100,100,20,20);

var patternB = ctx.createPattern(B, "repeat-y");
ctx.fillStyle = patternB;
ctx.fillRect(150,100,20,20);

Должно быть два прямоугольника размером 20х20, каждый со своим рисунком, однако второй прямоугольник вообще не отображается. Я перепробовал все, чтобы заставить их работать, но безрезультатно.

Почему это? Как мне рендерить несколько плиточных текстур на одном холсте?

Answer 1

Какие браузеры вы пробуете?С FireFox и Chrome я не мог получить ни один шаблон для рендеринга с repeat-x или repeat-y.Вместо этого я смог получить оба рендера всего за repeat.(См. http://jsfiddle.net/ZthsS/1/)

. Возможно, браузеры имеют неполную реализацию спецификации. В соответствии со статусом реализации на http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-createpattern, IE бета и FF каждую ночь проходят все тестовые случаи, но другие браузеры не 'т. я бы порекомендовал просто использовать repeat на данный момент. Вы можете эмулировать repeat-x и repeat-y, просто ограничив ширину fillRect шириной шаблона:

var patternA = ctx.createPattern(A, "repeat");
ctx.fillStyle = patternA;
ctx.fillRect(100,100,20,Math.min(20, A.height));

var patternB = ctx.createPattern(B, "repeat");
ctx.fillStyle = patternB;
ctx.fillRect(150,100,Math.min(20, B.width), 20);