HTML5 캔버스 컨텍스트가 아닌 이미지 만 회전

Question

캔버스 내부에서 이미지를 회전 할 수있는 방법이 있습니까? 내가 찾을 수있는 유일한 방법은 캔버스의 전체 컨텍스트를 회전하는 것입니다. 캔버스에서 이미지를 독립적으로 회전하고 싶습니다.

Answer 1

이미지를 직접 회전 할 수는 없습니다. 당신이 위치 X에서 폭 W 높이 H의 이미지를 표시 할 경우에 할 수있는 일

, Y는 이미지의 중간에 피벗과 (라디안) 각도 A를 함께 회전하는 것입니다 :

ctx.translate(-X - W/2, -Y - H/2); 
ctx.rotate(A); 
ctx.drawImage(YOUR_IMAGE, 0, 0); 
ctx.rotate(-A); 
ctx.translate(X + W/2, Y + H/2);