rotate() 함수.
회전의 중심은 항상 canvas의 시작점 입니다.
여기서 문제가 됩니다.
도형의 중심축을 기준으로 회전하지 않고 시작점을 중심으로 회전하기 때문에 도형이 제자리에서 회전하지 않는 문제가 생깁니다.
이때는 translate()로 도형의 가로길이/2, 세로길이/2 만큼 이동해서 회전한 후 다시 제자리로 돌아와야 도형이 제자리에서 회전한듯 보입니다.
아래 코드를 살펴봅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="draw()">
<canvas id="canvas" style="width:400;height:400"></canvas>
<script>
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// 좌측 사각형, canvas 원점에서 회전하기
ctx.save();
// 파란 사각형
ctx.fillStyle = '#0095DD';
ctx.fillRect(30, 30, 100, 100);
ctx.rotate((Math.PI / 180) * 15);
// 회색 사각형
ctx.fillStyle = '#4D4E53';
ctx.fillRect(30, 30, 100, 100);
ctx.restore();
// 우측 사각형, 사각형 중심에서 회전하기
// 파란 사각형 그리기
ctx.fillStyle = '#0095DD';
ctx.fillRect(150, 30, 100, 100);
ctx.translate(200, 80); // 사각형 중심으로 이동하기
// x = x + 0.5 * width
// y = y + 0.5 * height
ctx.rotate((Math.PI / 180) * 45); // 회전
ctx.translate(-200, -80); // 예전 위치로 이동하기
// 회색 사각형 그리기
ctx.fillStyle = '#4D4E53';
ctx.fillRect(150, 30, 100, 100);
}
</script>
</body>
</html>
첫번째 도형을 15도 정도 회전시켜 봅니다.
ctx.rotate((Math.PI / 180) * 15);
시작점을 기준으로 15도 회전 됩니다.
두번째 도형은 45도를 회전 시켜지만 제자리에서 회전한듯 보입니다.
ctx.fillRect(150, 30, 100, 100);
ctx.translate(200, 80); // 사각형 중심으로 이동하기
150 + 100(가로길이)/2 = 200
30 + 100(세로길이)/2 = 80
ctx.rotate((Math.PI / 180) * 45); // 회전
ctx.translate(-200, -80); // 예전 위치로 이동하기
이런식으로 회전하면 제자리 회전이 가능합니다.
반응형
'프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] Canvas setTransform, transform (0) | 2022.07.23 |
|---|---|
| [HTML] Canvas에 대해서.. (0) | 2022.07.18 |
