HTML5 캔버스에서 다각형을 이미지로 채울 수 있나요?
네, 가능합니다. 핵심은 이미지를 활용해 패턴(pattern)을 생성한 뒤, 이 패턴을 fillStyle에 설정하는 것입니다. 이렇게 하면 도형 내부가 이미지로 채워집니다.
아래 예시에서 obj는 캔버스에 사용할 이미지 객체입니다.
1. 패턴 생성 및 fillStyle 설정
var context = canvas.getContext("2d");
var pattern = context.createPattern(obj, "repeat");
context.fillStyle = pattern;createPattern() 메서드의 두 번째 인자인 "repeat"는 이미지가 도형 전체를 덮도록 반복 배치되도록 지정합니다. 필요에 따라 "repeat-x", "repeat-y", "no-repeat" 등의 옵션도 사용할 수 있습니다.
2. 이미지를 다각형에 맞게 변형하기
임의의 다각형 모양에 이미지를 맞추려면 이미지에 변형(transform)을 적용해야 합니다. setTransform()을 사용해 좌표계를 조정한 후 이미지를 그리면 됩니다.
context.save(); context.setTransform(m11, m12, m21, m22, dx, dy); context.drawImage(obj); context.restore();
setTransform()의 매개변수는 다음과 같은 역할을 합니다.
- m11, m22: 가로 및 세로 크기(스케일) 조절
- m12, m21: 이미지 기울이기(skew)
- dx, dy: 이미지 위치 이동(좌표 이동)
save()와 restore()를 함께 사용하면 변형이 적용되기 이전의 캔버스 상태로 안전하게 되돌아갈 수 있으므로, 다른 그리기 작업에 영향을 주지 않습니다.
정리
이미지 패턴 생성과 좌표 변환을 조합하면 HTML5 캔버스에서 삼각형, 육각형 등 어떤 다각형이든 원하는 이미지로 채울 수 있습니다. 패턴으로 반복 채우기와 변환 행렬을 이용한 크기·위치 조절을 적절히 활용해 보세요.