Published on

The canvas pattern

Authors
  • avatar
    Name
    Luffy Yeon
    Twitter

pattern

루프를 사용하여 만드는 패턴 외에 createPattern 메소드를 사용하여 패턴을 만들 수 있습니다.


createPattern(image, type)

  • image는 CanvasImageSource(즉, HTMLImageElement, 다른 캔버스, video 요소 등등)입니다. type은 이미지 사용 방법을 나타내는 문자열입니다.
  • type: repeat, repeat-x, repeat-y, no-repeat

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, 150, 150)
}
}
pattern Image