HTML5 캔버스의 2D 컨텍스트에서 여러 이미지 패턴?

Question

HTML5 캔버스의 2D 컨텍스트에서 여러 패턴 (각각 텍스처가 다름)을 렌더링하는 데 어려움을 겪고 있습니다.

세 개의 별도 캔버스가 있다고 가정하면 두 개의 화면에는 서로 다른 텍스처가 포함되어 있고 하나는 렌더링 용입니다. 이러한 오프라인 캔버스는 A와 B

다음

하자 :

이

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을 사용하는 것이 좋습니다. 당신은 단순히 패턴의 폭에 fillRect 할의 폭을 제한하여 repeat-x 및 repeat-y을 모방 수 : 그런 경우처럼

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);