- Published on
The canvas pattern
- Authors
- Name
- Luffy Yeon
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) }}