canvas回転写真(javascript)

最近はプロジェクトの中でcanvasで画像を回転させる必要がありますが、この点も最初は分かりませんでした.多くの資料を探してやっとこの問題を解決しました.主に三つの関数を使いました.tranlate、rotate、drawImage.
 トレイ(x,y):移動画布座標システム、xとyは水平と垂直方向のオフセット量を表します.
 rotate(reg):画像を回転させ、regは回転の度数を表します.例えば、Math.PI/4は45と表します.
 drawImage(source,sx,sy,sh,sw,dx,dh,dh,dw):画像をキャンバスに載せる.sourceで表されるピクチャのオブジェクトは、sxとsyは、ピクチャの円点からのオフセット量を表し、shとswは、ロードピクチャの長さと幅を表します.
 dxとdy:キャンバス原点からのオフセット量、dhとdw:キャンバス幅と高さを利用します.
 
 今は写真を回転して時計回りに回転します.
 まずHTMLの上にcanvas要素を追加します. 
 
 そしてjavascriptでこのcanvasを取得する必要があります.
 var canvasObj=document.getElementById(「test」)
 次はcanvasの環境に戻ります.
 var cxt=canvasObj.getConttext("2 d")//2 dは二次元で表しています.
 私たちはこのキャンバスに回転センターを設定します.でも、このところは重点的に言ってください.写真は普通長方形です.キャンバスも長方形にしたら.回転中に一部の写真が切り取られます.したがって、画像が長方形の場合、まず画像の最大サイズの端にキャンバスの長さと幅を設定します.たとえば一枚の写真は200*100です.私たちのキャンバスは200*200でなければなりません.このように回転すると、切断されません.
 中心点を設けるということは、上で述べたtranlate方法で、xとyを正方形の中心点に設定します.例えば200*200のキャンバスは中心点が100*100です.
 cxt.translate(100,100)
 センターを設置したら、キャンバスを回転させたいです. 
 cxt.rotate((2*Math.PI)/*4)//90度回転
 そして私たちは写真オブジェクトを追加します.
 var img=new Image() 
img.src=「baidujgylogo 3.gif」
 img.οnlοad=function(){
cxt.drawImage(this、-100、-100)、/-100とtranslateの順方向100は、互いに相殺され、画像の原点と画布の原点を重ね合わせます.        
 }
このようにして写真の回転機能を完成します.
コード:

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.translate(58,58);
cxt.rotate(2*(Math.PI/2));
var img=new Image();
img.src="baidu_jgylogo3.gif";
img.οnlοad=function(){	
	cxt.drawImage(img,-58,-58);	
	cxt.save();		
	
}