Web►Front-End

[Front-End] Canvas依照圖中心旋轉

前言

若對Canvas做旋轉會是依照最左上角為中心，所以若要針對特殊的圖中心就要做些處理。

方法

先使用save()保存畫布。

1
ctx.save();

由於是針對左上角旋轉，所以我們先把畫布移到物體的座標。

1
ctx.translate(obj.x,obj.y);

再移到物體的中心。

1
ctx.translate(obj.width/2,obj.height/2);

旋轉。

1
ctx.rotate( 1 );

再移動畫布

1
ctx.translate(-obj.width/2,-obj.height/2);

畫上圖案

1
ctx.drawImage(obj, 0,  0, obj.width, obj.height);

還原

1
ctx.restore();

完整代碼

記得自己替換內容。

1
2
3
4
5
6
7
ctx.save();
ctx.translate(view.width ,view.height);
ctx.translate(view.width/2,view.height/2); 
ctx.rotate( ang );
ctx.translate(-view.width/2,-view.height/2);
ctx.drawImage(view, 0,  0, view.width, view.height);
ctx.restore();