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

Question


const COLORS = [
  "#394fb8",
  "#554fb8",
  "#605ac7",
  "#2a91a8",
  "#2e9ab2",
  "#32a5bf",
  "#81b144",
  "#85b944",
  "#8fc549",
  "#e0af27",
  "#eeba2a",
  "#fec72e",
  "#bf342d",
  "#ca3931",
  "#d7423a",
];

export class Polygon {
  constructor(x, y, radius, sides) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.sides = sides;
    this.rotate = 0;
  }

  animate(ctx, moveX) {
    ctx.save();

    const angle = PI2 / this.sides;
    const angle2 = PI2 / 4;

    ctx.translate(this.x, this.y);

    this.rotate += moveX * 0.008;
    ctx.rotate(this.rotate);

    for (let i = 0; i < this.sides; i++) {
      const x = this.radius * Math.cos(angle * i);
      const y = this.radius * Math.sin(angle * i);

      i == 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);

      ctx.save();
      ctx.fillStyle=COLORS[i]
      ctx.translate(x, y);
      ctx.rotate((((360 / this.sides) * i + 45) * Math.PI) / 180);
      ctx.beginPath();
      for (let j = 0; j < 4; j++) {
        const x2 = 160 * Math.cos(angle2 * j);
        const y2 = 160 * Math.sin(angle2 * j);
        j == 0 ? ctx.moveTo(x2, y2) : ctx.lineTo(x2, y2);
      }
      ctx.fill();
      ctx.closePath();
      ctx.restore();
    }
    ctx.restore();
  }
}

지금은 COLORS 배열을 이용해 fillstyle의 색을 넣었는데, 색상 대신 특정 이미지들을 넣고싶습니다.

ctx.fillstyle = colors[i] 를 어떤 식으로 바꿔야할까요..?

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

인프런 커뮤니티 질문&답변

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