HTML5のキャンバス - グラフィック例コード +効果図アークを描き、回転させる

コメント：回転操作を行う前に、1つの文を理解する必要があります。回転は、図自体ではなくキャンバスの座標系です。まず、円の座標を理解しましょう。中心、開始角、端角。次のものはとてもシンプルです

まず、円の座標を理解しましょう。

<スクリプト言語= "javascript">

var cxt = document.getElementById（ 'demo'）。getContext（ "2d"）;

cxt.beginpath（）;

cxt.arc（100,100,50、math.pi*0.75、math.pi*1.75、false）;/*中心座標を100,100の中心座標で描画します。スタートラジアンは0.75、エンドラジアンは1.75、最後のパラメーターfalse = clockwise、true = countercockwiseです。もちろん、このパラメーターはオプション*/

cxt.fillstyle = "＃f00";/*使用する色を選択*/

cxt.fill（）;/*キャンバスに実際に図を描くための1つのステップ、最初の半円を描画*/

/*2番目の半円を描画することを好む*/

cxt.beginpath（）;

cxt.arc（170,100,50、math.pi*1.25、math.pi*0.25、false）;

cxt.fillstyle = "＃f00";

cxt.fill（）;/*キャンバスに描画されたグラフィックを描く*/

cxt.beginpath（）;

/*時計回りにキャンバスを45度回転させます。回転関数のパラメーターはラジアンなので、それを変換する必要があります */

cxt.rotate（45*math.pi/180）;

cxt.fillrect（141.1、-50,100,100）;/*開始座標は141.1、-50、幅と高さは100*/

cxt.fillstyle = "＃f00";

cxt.fill（）;

cxt.beginpath（）;

/*キャンバスを通常の角度に回転*/

cxt.rotate（-45*math.pi/180）;

cxt.font = "60px microsoft yahei";

cxt.strokestyle = "＃f00";

cxt.StrokeText（ "I Love HTML5"、0,300）;/*2つのパラメーター、1つ目はテキストのx軸座標の描画を開始することです。2つ目は、テキストのy座標*/

cxt.stroke（）;

/*勾配を作成*/

var grd = cxt.createlinear gradient（0,45,175,50）;/*4つのパラメーターは、勾配開始点x、y勾配エンドポイントx、y*/です。

Grd.AddColorStop（0、 "＃ff0000"）;

Grd.AddColorStop（0.25、 "＃ffff00"）;

Grd.AddColorStop（0.5、 "＃00FF00"）;

Grd.AddColorStop（0.75、 "＃00ffff"）;

Grd.AddColorStop（1、 "＃ffff00"）;

cxt.strokestyle = grd;

cxt.StrokeText（ "I Love Canvas"、0,400）;/*2つのパラメーター、1つ目はテキストのx軸座標の描画を開始することです。

cxt.stroke（）;

</script>

複製画像：