는 HTML5 캔버스

Question

이 같은 HTML5 캔버스에 이미지를 회전 할

에 이미지를 회전 : http://webutils.co.uk/code/awc-image-rotater

사람이 내가이 작업을 수행 할 수있는 방법을 생각이 있습니까?

ctx3.drawImage(img3, -235, -142, 128, 128); 
ctx3.translate(151, 142); 
ctx3.rotate(90 * Math.PI/180); 

을하지만 내 요구 사항을 충족 정말로 :

나는이 같은 시도하고있다. 어떤 도움도 깊이 감사 할 것입니다.

Answer 1

이미지를 그릴 때 전에을 번역하고 회전해야합니다. 회전 및 변환 된 위치로 컨텍스트를 설정하면 변환 된 회전 된 상태로 드로잉을 수행합니다.

당신은 연결의 예에서 볼 수있는이 정확한 링크는 http://webutils.co.uk/code/awc-image-rotater

this._rotate_canvas(deg, [Tx, Ty]); 
this._context.drawImage(this._img_copy, this._overflow_x, this._overflow_y, this._image_width, this._image_height); 

_rotate_canvas: function(deg, aPoint) 
{ 
    this._context.translate(aPoint[0], aPoint[1]); 
    this._context.rotate(this.deg2rad(deg)); 
    this._context.translate(-aPoint[0], -aPoint[1]); 
}