HTML <canvas> createPattern() - 패턴 만들기

1. createPattern()

createPattern() 메소드는 패턴 객체를 만들어 반환합니다.

image는 CanvasImageSource (즉, HTML ImageElement, 다른 캔버스, <video>요소 등등)입니다. type은 이미지 사용 방법을 나타내는 문자열입니다.

 

type	패턴을 만들기 위해 이미지를 사용하는 방법을 지정하며, 다음 문자열 값 중 하나 여야합니다.
repeat	수직 및 수평 방향으로 이미지를 이어 붙입니다.
repeat-x	수평 방향으로만 이미지를 이어 붙입니다.
repeat-y	수직 방향으로만 이미지를 이어 붙입니다.
no-repeat	이미지를 이어 붙이지 않습니다. 이미지는 한번만 사용됩니다.

 

createPattern() 메소드를 사용하여 그라디언트 메소드와 유사한 CanvasPattern 객체를 생성할 수 있습니다. 생성한 패턴은 fillStyle 또는 strokeStyle 속성에 할당할 수 있습니다.

 

 

 

2. createPattern() 예제

function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');

      // 패턴으로 사용할 이미지 오브젝트를 생성한다
      var img = new Image();
      img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
      img.onload = function () {

        // 패턴을 생성한다
        var ptrn = ctx.createPattern(img, 'repeat');
        ctx.fillStyle = ptrn;
        ctx.fillRect(0, 0, 600, 600);

      }
    }

 

결과 화면

 

 

예제는 오른쪽의 이미지로 패턴을 만들어 fillStyle 속성에 적용한것입니다.

이미지 onload 핸들러 사용했는데,

이것은 이미지를 패턴에 적용하기 전에 불러오기가 완료되었는지 확인하는 것입니다.