18. createPattern - 패턴만들기

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.

.createPattern( img,type )

캔버스 요소에 패턴 오브젝트를 생성 합니다. 
글쓴 날자를 기준으로 파이어폭스는 repeat속성만 지원합니다.
캔버스 크기가 0x0픽셀일경우 오류가 발생 합니다.

• .createPattern( img, type )
• 인자 : img
• 설명 : image 객체
• 인자 : type : repeat
• 설명 : 수직 및 수평 방향으로 이미지를 이어붙입니다.
• 인자 : type : repeat-x
• 설명 : 수평 방향으로만 이미지를 이어 붙입니다.
• 인자 : type : repeat-y
• 설명 : 수직 방향으로만 이미지를 이어 붙입니다.
• 인자 : type : no-repeat
• 설명 : 이미지를 이어 붙이지 않습니다. 이미지는 한번만 사용됩니다.

그라디언트 메소드와 매우 비슷한 CanvasPattern오브젝트를 생성하려면 이 메소드를 사용 합니다. 무늬를 만들어 놓으면 fillStyle 또는 strokeStyle속성에 적용할 수 있습니다. 생성방법은 다음과 같습니다.

?

1 2 3

var img = new Image(); img.src = 'someimage.png'; var ptrn = ctx.createPattern(img,'repeat');

이 마지막 예제에서, fillStyle 속성에 적용할 무늬를 만들 것입니다. 한 가지 눈여겨 볼 것은, 이미지 onload 핸들러 사용입니다. 이미지를 패턴에 적용하기 전에 불러오기가 완료되었는지 확인하는 것입니다.

Source 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function draw() {   var ctx = document.getElementById('canvas').getContext('2d');     // create new image object to use as pattern   var img = new Image();   img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';   img.onload = function(){       // create pattern     var ptrn = ctx.createPattern(img,'repeat');     ctx.fillStyle = ptrn;     ctx.fillRect(0,0,150,150);     } }

Demo