JavaScriptを使って円を描く方法

JavaScript で円を描く方法: 1. 円弧に必要なパラメータを設定します; 2. startAngle と endAngle を設定します; 3. 円を描く方向を反時計回りに設定します。

この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、DELL G3 コンピューター

JavaScriptで丸める？

#JavaScript 関数 arc を使用して Web ページに円を描く方法

この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、DELL G3 コンピューター

1. arc に必要なパラメータ設定 #コードは次のとおりです:

arc(x, y, radius, startAngle, endAngle, counterclockwise);

ここで、x、y、radius は非常に分かりやすいので、startAngle、endAngle、反時計回りの 3 つのパラメータに注目してみましょう。

2. 円弧パラメータの詳細説明

1. startAngle と endAngle は、それぞれ円の開始角度と終了角度を指します。終了角度は Math.PI*2 で、単に円を描くだけです。

2. 以下では、例を通して startAngle と endAngle を説明します (私が書いたわけではないことに注意してください) HTML コード)

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

以下に示すように、開始角度を 0 に、終了角度を 1 に設定します。

#

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

開始角度を 1 に、終了角度を 2 に設定します。したがって、以下に示すように、

上記のようになります。 1枚目の画像を参照 画像の終点は2枚目の画像の始点であり、円には無数の角度があることを意味します 開始角度と終了角度を設定すれば、 の形で2点を結ぶことができます弧を描いた！始点と終点の差はグラフ上の 2 点の長さです。始点と終点の差が 2 つの点に一致する場合、円が形成されます。これを理解すると、動的な円を作成できます。

3. 反時計回りとは、反時計回り (true) または時計回り (false) を指します。

開始点を 0 に設定すると、終了点が決まります。右回りを選択した場合は 1 です

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

始点を 0、終点を 1 に設定した場合、左回りを選択した場合

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, true);
cxt.stroke();

推奨学習: 「
JavaScript 基本チュートリアル

」

以上がJavaScriptを使って円を描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。