HTML5의 drawImage() 메서드는 캔버스(canvas) 위에 이미지, 다른 캔버스 또는 비디오를 그릴 때 사용하는 강력한 도구입니다. 이 메서드를 활용하면 이미지의 특정 부분만 잘라내어 그릴 수 있을 뿐만 아니라, 이미지의 크기를 확대하거나 축소하는 것도 가능합니다.
drawImage() 메서드의 매개변수
drawImage() 메서드는 다양한 매개변수를 지원합니다. 각 매개변수의 역할은 아래 표와 같습니다.
| 번호 | 매개변수 및 설명 |
|---|---|
| 1 | img 그릴 대상이 되는 이미지, 캔버스 또는 비디오를 지정합니다. |
| 2 | sx 클리핑(잘라내기)을 시작할 x 좌표입니다. (선택 사항) |
| 3 | sy 클리핑을 시작할 y 좌표입니다. (선택 사항) |
| 4 | swidth 클리핑된 이미지의 너비입니다. (선택 사항) |
| 5 | sheight 클리핑된 이미지의 높이입니다. (선택 사항) |
| 6 | x 캔버스에 이미지가 배치될 위치의 x 좌표입니다. |
| 7 | y 캔버스에 이미지가 배치될 위치의 y 좌표입니다. |
| 8 | width 그려질 이미지의 너비를 지정합니다. |
| 9 | height 그려질 이미지의 높이를 지정합니다. |
예제 코드
아래 예제 코드를 실행하면 drawImage() 메서드를 사용해 캔버스에 이미지를 회전시키며 그리는 방법을 직접 확인할 수 있습니다. 이 예제는 패턴 이미지를 불러와 일정한 간격으로 회전 애니메이션을 구현합니다.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
var pattern = new Image();
function animate() {
pattern.src = '/html5/images/pattern.jpg';
setInterval(drawShape, 100);
}
function drawShape() {
// DOM을 통해 캔버스 요소 가져오기
var canvas = document.getElementById('newCanvas');
// 캔버스가 지원되지 않는 브라우저에서는 실행하지 않음
if (canvas.getContext) {
// getContext로 2D 드로잉 컨텍스트 사용
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(150,150);
var time = new Date();
ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() );
ctx.translate(0,28.5);
ctx.drawImage(pattern,-3.5,-3.5);
ctx.restore();
}
else {
alert('이 데모를 보려면 Safari 또는 Firefox 1.5+ 브라우저가 필요합니다.');
}
}
</script>
</head>
<body onload = "animate();">
<canvas id = "newCanvas" width = "400" height = "400"></canvas>
</body>
</html>코드 설명
위 예제의 핵심 동작 흐름은 다음과 같습니다.
1. 이미지 로드: new Image() 객체를 생성하고 src 속성에 이미지 경로를 지정하여 패턴 이미지를 불러옵니다.
2. 반복 실행: setInterval() 함수를 사용해 100밀리초마다 drawShape() 함수를 호출합니다.
3. 좌표 변환: translate()와 rotate() 메서드를 조합해 현재 시간에 따라 이미지를 회전시킵니다.
4. 이미지 그리기: drawImage(pattern, -3.5, -3.5)를 호출하여 변환된 좌표 위치에 이미지를 렌더링합니다.
5. 상태 복원: restore() 메서드로 저장된 캔버스 상태를 복원하여 다음 프레임에 영향을 주지 않도록 합니다.
이처럼 drawImage() 메서드는 단순한 이미지 출력부터 클리핑, 크기 조절, 애니메이션까지 다양하게 활용할 수 있어 HTML5 캔버스 작업에서 필수적인 메서드입니다.