작성한 질문수 6

0

안녕하세요, 인프런 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 배열을 가지고 반복문을 돌면서 패턴을 생성하고 적용하는 방법을 활용하면 됩니다.