목차
반응형
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 |
반응형
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 |
