HTML5 캔버스는 scale(x, y) 메서드를 제공하여 캔버스 그리드의 단위를 늘리거나 줄일 수 있습니다. 이 메서드를 활용하면 도형이나 비트맵을 축소하거나 확대한 형태로 손쉽게 그릴 수 있습니다.
scale() 메서드의 매개변수
scale() 메서드는 두 개의 매개변수를 받습니다.
- x: 가로 방향(수평)의 배율(스케일 팩터)
- y: 세로 방향(수직)의 배율(스케일 팩터)
두 매개변수 모두 반드시 양수여야 합니다. 예를 들어 scale(0.75, 0.75)를 적용하면 도형이 원래 크기의 75%로 균등하게 축소되고, scale(1, 0.75)처럼 서로 다른 값을 지정하면 세로 방향으로만 눌린 형태로 그려집니다.
예제
아래 예제는 스피로그래프(spirograph) 패턴을 그리면서 균등 스케일링과 비균등 스케일링을 각각 적용하는 코드입니다. ctx.save()와 ctx.restore()를 사용해 변환 상태를 저장하고 복원하는 방식도 함께 확인할 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<script>
function drawShape(){
// DOM을 통해 canvas 요소 가져오기
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
// getContext로 2D 드로잉 컨텍스트 사용
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "#fc0";
ctx.lineWidth = 1.5;
ctx.fillRect(0,0,300,300);
// 균등 스케일링 (Uniform scaling)
ctx.save()
ctx.translate(50,50);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(133.333,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();
ctx.strokeStyle = "#0cf";
ctx.save()
ctx.translate(50,150);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();
ctx.strokeStyle = "#cf0";
ctx.save()
ctx.translate(50,250);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.translate(133.333,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.translate(177.777,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.restore();
} else {
alert('이 데모를 보려면 Safari 또는 Firefox 1.5+ 브라우저가 필요합니다.');
}
}
function drawSpirograph(ctx,R,r,O){
var x1 = R-O;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1,y1);
do {
if (i>20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
ctx.lineTo(x2,y2);
x1 = x2;
y1 = y2;
i++;
}
while (x2 != R-O && y2 != 0 );
ctx.stroke();
}
</script>
</head>
<body onload = "drawShape();">
<canvas id = "mycanvas" width = "400" height = "400"></canvas>
</body>
</html>코드 설명
예제의 핵심 동작은 다음과 같습니다.
- 첫 번째 행(노란색): scale(0.75, 0.75)을 반복 적용해 도형을 가로·세로 모두 75%씩 균등하게 축소합니다.
- 두 번째 행(청록색): scale(1, 0.75)을 적용해 가로 크기는 유지한 채 세로만 75%로 줄입니다.
- 세 번째 행(연두색): scale(0.75, 1)을 적용해 세로 크기는 유지한 채 가로만 75%로 줄입니다.
또한 translate()로 좌표를 이동한 후 scale()을 적용하면, 스케일링 기준점이 이동한 위치가 된다는 점에 유의하세요. save()와 restore()를 짝지어 사용하면 변환 상태가 누적되는 것을 방지할 수 있어 복잡한 그리기 작업에서 특히 유용합니다.