티스토리 뷰

Develop/canvas

26. rotate() - 회전하기

GuriZzang 2015. 8. 10. 15:32

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.


.rotate()

.rotate( angle ) 객체를 angle만큼 회전시킵니다.


요소를 angle위치만큼 이동 시킵니다.



요소에 .rotate()를 적용할 경우 생각한것과 다른 위치에 요소가 위치해 있을 수 있습니다. 회전의 기준점이 canvas요소의 0,0위치이기 때문입니다. 요소의 중앙을 기준으로 회전을 시키고 싶을때에는 .translate()로 현재 canvas의 기준점을 요소의 중앙위치로 이동시켜 주어야 합니다.


1
2
3
4
5
6
7
ctx.translate(60, 60); // translate to rectangle center
// x = x + 0.5 * width
// y = y + 0.5 * height
ctx.rotate((Math.PI/180)*25); // rotate
ctx.translate(-60, -60); // translate back
 
ctx.fillRect(10, 10, 100, 100);

.fillRect( 10,10,100,100 ) x:10, y:10씩 이동후 넓이100, 높이100의 사각형을 그리게 됩니다. 이 사각형의 기준점은 60,60 입니다.

먼저 canvas 중심점을 60,60 이동을 시켜 그릴 요소의 중앙으로 옮긴 후 .rotate()로 회전을 시킵니다.

다시 canvas의 중심점을 처음위치인 -60,-60 으로 이동시키면 됩니다.


아래의 소스는 중심점을 이동시키지 않고 사각형을 회전시키는 예제와 중심점을 이동 후 회전시키는 예제 입니다.



Source 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
   
  // left rectangles, rotate from canvas origin
  ctx.save();
  // blue rect
  ctx.fillStyle = "#0095DD";
  ctx.fillRect(30,30, 100, 100);
  ctx.rotate((Math.PI/180)*25);
  // grey rect
  ctx.fillStyle = "#4D4E53";
  ctx.fillRect(30,30, 100, 100);
  ctx.restore();
 
  // right rectangles, rotate from rectangle center
  // draw blue rect
  ctx.fillStyle = "#0095DD";
  ctx.fillRect(150, 30, 100, 100); 
   
  ctx.translate(200, 80); // translate to rectangle center
                          // x = x + 0.5 * width
                          // y = y + 0.5 * height
  ctx.rotate((Math.PI/180)*25); // rotate
  ctx.translate(-200, -80); // translate back
   
  // draw grey rect
  ctx.fillStyle = "#4D4E53";
  ctx.fillRect(150, 30, 100, 100);
}



Demo

'Develop > canvas' 카테고리의 다른 글

28. transform() - 회전  (0) 2015.08.10
27. scale() - 크기확대/축소  (0) 2015.08.10
26. rotate() - 회전하기  (0) 2015.08.10
25. translate() - 위치이동  (0) 2015.08.10
24. restore() - 저장된 스타일 복원  (0) 2015.08.10
23. save() - 현재 스타일저장  (0) 2015.08.10
댓글
댓글쓰기 폼
공지사항
Total
51,684
Today
5
Yesterday
37
링크
«   2020/10   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함