回転操作を実行する前に、次の 1 つの文を理解する必要があります。回転されるのはグラフィック自体ではなく、キャンバスの座標系です。この文を理解すれば、次のステップは非常に簡単です。 まず、円を描く座標を確認します: コードをコピーしますコードは次のとおりです。 <br>var cxt=document.getElementById('demo').getContext("2d"); cxt.beginPath(); <br>cxt.arc(100,100,50,Math.PI*0.75,Math.PI*1.75,false);/*中心座標は 100,100 で、開始ラジアンは 0.75 です。 、最後のラジアンは 1.75、最後のパラメータ False = 時計回り、True = 反時計回り、もちろん、このパラメータはオプションです*/ <br>cxt.fillStyle="#F00";/*使用する色を選択してください*/ <br>cxt.fill();/ *実際にキャンバス上にグラフィックを描画する最初のステップは、最初の半円を描画することです*/ <br>/*同じ方法で 2 番目の半円を描画します*/ <br>cxt.beginPath (); <br>cxt.arc(170,100, 50,Math.PI*1.25,Math.PI*0.25,false); <br>cxt.fillStyle="#F00"; /*描画したグラフィックをキャンバスに描画します*/ <br>cxt.beginPath(); <br>/*回転関数のパラメータはラジアンなので変換する必要があります*/ <br>cxt.rotate(45*Math.PI/180) ; <br>cxt.fillRect(141.1,-50,100,100);/*開始座標は 141.1,-50、幅と高さは 100*/ <br>cxt .fillStyle="#F00"; <br>cxt.fill (); <br>cxt.beginPath() <br>/*キャンバスを通常の角度に回転します*/ <br>cxt.rotate(-45*) Math.PI/180); <br>cxt.font= "60px Microsoft 弥平" <br>cxt.strokingStyle="#f00"; <br>cxt.ストロークテキスト("I love html5",0,300); 2 つのパラメーター。1 つ目はテキストの描画を開始する X 軸座標、2 つ目はテキストの描画を開始する Y 座標です*/ <br>cxt.stroking()/*Create gradient*/ <br>var grd=cxt.createLinearGradient(0,45,175,50); /* 4 つのパラメータは、グラデーションの開始点 x、y、グラデーションの終了点 x、y*/ <br>grd.addColorStop(0,"#FF0000"); 🎜>grd.addColorStop(0.25,"#FFFF00") ; <br>grd.addColorStop(0.5,"#00FF00"); <br>grd.addColorStop(0.75,"#00FFFF"); (1,"#FFFF00"); <br>cxt .drawingStyle=grd; <br>cxt.drawingText("I love Canvas",0,400);/* 2 つのパラメータ、1 つは描画を開始する X 軸座標ですテキスト、2 番目はテキストの描画を開始する Y 座標です* / <br>cxt.drawing()<br>