canvas의 도형에 원하는 이미지들을 넣고 싶습니다.

Question

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 질문해주신 canvas에서 도형에 원하는 이미지를 채우는 방법에 대해 설명드리겠습니다. 먼저, 이미지를 도형에 채우기 위해서는 CanvasRenderingContext2D 인터페이스의 createPattern() 메서드를 사용해서 패턴을 생성해야 합니다. 이 메서드는 이미지, 캔버스, 또는 비디오를 이용해 패턴 객체를 생성하고, 이 패턴을 fillStyle 프로퍼티에 할당하는 방식으로 작동합니다. 다음은 createPattern() 메서드를 사용해서 도형에 이미지를 채우는 방법을 보여주는 간단한 예시 코드입니다. // 이미지 로딩 함수 function loadImage(url) { return new Promise((resolve, reject) => { const image = new Image(); image.onload = () => resolve(image); image.onerror = reject; image.src = url; }); } // 이미지 패턴 적용 함수 async function drawPattern(ctx) { const image = await loadImage('이미지URL'); // 여기에 원하는 이미지 URL을 넣으세요 const pattern = ctx.createPattern(image, 'repeat'); // repeat, repeat-x, repeat-y, no-repeat 중 선택 ctx.fillStyle = pattern; // 이 부분에 도형 그리는 코드를 넣으세요. 예: ctx.fillRect(0, 0, canvas.width, canvas.height); } // Canvas에 그리기 예시 const canvas = document.getElementById('myCanvas'); if (canvas.getContext) { const ctx = canvas.getContext('2d'); drawPattern(ctx); } 위 코드에서 loadImage 함수는 Promise를 이용해 이미지가 로드될 때까지 대기한 후, 이미지 객체를 반환합니다. 그 다음 drawPattern 함수에서 loadImage 를 호출하여 이미지를 로드하고, 이 이미지를 createPattern 메서드를 통해 패턴으로 생성합니다. 마지막으로 이 패턴을 fillStyle 에 할당하고, 캔버스에 도형을 그리는 코드를 사용하여 이미지 패턴으로 채워진 도형을 그립니다. ctx.fillStyle = COLORS[i] 부분을 위의 코드 예시에 따라 수정하면, 색상 대신 특정 이미지들로 도형을 채울 수 있습니다. 이미지 패턴을 여러 개 사용하려면, 이미지 URL 배열을 가지고 반복문을 돌면서 패턴을 생성하고 적용하는 방법을 활용하면 됩니다.