DOM Canvas 회전

캔버스를 회전시킨다.

javascript

(100, 100) (150, 150) 위치의 사각형을 회전시키는 예제이다.

rotate 하나만 사용해서 사각형을 원하는대로 회전시킬 수 없으며 

원점을 사각형의 중점으로 이동 시킨후 회전을 시켜야 생각한대로 회전하게 된다.

아래의 순서대로 차근차근 진행하면 올바르게 동작한다.

1. 2d의 평면상태 세팅 ( setTransform 매서드 )

2. 사각형의 중심부를 원점으로 세팅 ( translate )

3. 원하는 값으로 회전 ( rotate )

4. 사각형의 중심부가 원점인 것을 인지하고 사각형을 그린다. ( fillRect )

이 패턴은  회전 뿐만 아니라 여러 예에서도 많이 사용되는 패턴이므로, 잘 숙달 할 필요가 있다.

1. function load(target) {

2.     // 실제로 그려지는 위치의 캔버스 생성

3.     var canvas = document.getElementById("draw");

4.     var ctx = canvas.getContext("2d");

5.  

6.  

7.     // 입력값

8.     var x = 100;

9.     var y = 100;

10.     var cx = 300;

11.     var cy = 300;

12.     var degree = 45;

13.    

14.     var width = cx - x;

15.     var height = cy - y;

16.     var radian = degree * Math.PI / 180;

17.     ctx.fillStyle = "red";

18.    

19.     // 2d 평면 상태 세팅

20.     ctx.setTransform(1, 0, 0, 1, 0, 0);

21.     // 사각형 안으로 원점 이동

22.     ctx.translate(x + .5*width, y + .5*height);

23.     // 회전

24.     ctx.rotate(radian);

25.     // 원점이 사각형의 중심임을 인지하고 그림 그리기

26.     ctx.fillRect(-.5*width, -.5*height, width, height);

27. }

결과