26. rotate() - 회전하기

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