HTML5 캔버스(canvas)는 변환 행렬(transformation matrix)을 직접 수정할 수 있는 메서드를 제공합니다. 변환 행렬은 처음에 항등 변환(identity transform) 상태로 시작하며, 이후 다양한 변환 메서드를 사용해 이동, 확대·축소, 기울임 등을 자유롭게 조합할 수 있습니다.
변환 행렬 관련 주요 메서드
| 번호 | 메서드 및 설명 |
|---|---|
| 1 | transform(m11, m12, m21, m22, dx, dy) 현재 변환 행렬에 인수로 지정한 행렬을 곱하여 새로운 변환을 누적으로 적용합니다. |
| 2 | setTransform(m11, m12, m21, m22, dx, dy) 현재 변환 행렬을 무시하고 인수로 지정한 행렬로 완전히 대체합니다. 즉, 행렬을 초기화한 뒤 새 변환을 설정하는 것과 같습니다. |
transform() 메서드의 동작 원리
transform(m11, m12, m21, m22, dx, dy) 메서드는 현재 변환 행렬에 아래 행렬을 곱합니다.
m11 m21 dx m12 m22 dy 0 0 1
각 매개변수의 의미는 다음과 같습니다.
- m11: 가로 방향 크기 조절(scaling)
- m12: 세로 방향 기울임(skewing)
- m21: 가로 방향 기울임(skewing)
- m22: 세로 방향 크기 조절(scaling)
- dx: 가로 방향 이동(translation)
- dy: 세로 방향 이동(translation)
transform()과 setTransform()의 차이
transform()→ 기존 변환 위에 새로운 변환을 덧씌워 누적합니다. 여러 단계의 변환이 순차적으로 반영됩니다.setTransform()→ 기존 변환을 모두 지우고 지정한 행렬로 교체합니다. 이전 변환의 영향 없이 깨끗한 상태에서 시작할 때 유용합니다.
예제
다음은 transform()과 setTransform() 메서드를 활용해 사각형에 이동과 확대 변환을 적용하는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>HTML5 변환 행렬 예제</title>
</head>
<body>
<canvas id = "myCanvas" width = "420" height = "180"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 원본 사각형 (파란색)
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 80, 40);
// transform(): 확대 후 이동 적용 (빨간색)
ctx.transform(1.5, 0, 0, 1.5, 130, 10);
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 80, 40);
// setTransform(): 행렬 초기화 후 기울임 적용 (초록색)
ctx.setTransform(1, 0.3, 0, 1, 280, 40);
ctx.fillStyle = "green";
ctx.fillRect(20, 20, 80, 40);
</script>
</body>
</html>
위 코드를 실행하면 파란색 사각형을 기준으로, transform()이 적용된 빨간색 사각형은 확대되어 오른쪽으로 이동하고, setTransform()이 적용된 초록색 사각형은 기존 변환이 초기화된 상태에서 기울어진 형태로 그려지는 것을 확인할 수 있습니다.