JavaScriptのarc関数を使ってWebページに円を描く方法_JavaScriptスキル

1. arc に必要なパラメータ設定

コードをコピーします コードは次のとおりです:

arc(x, y, radius, startAngle, endAngle, 反時計回り);

x、y、radius はすべて理解するのが簡単なので、startAngle、endAngle、反時計回りの 3 つのパラメーターに注目してみましょう。

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

1. startAngle と endAngle は、それぞれ円の開始角度と終了角度を指し、開始角度は 0、終了角度は 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 に設定します

上記のことから、最初の画像の終点が 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 関数 arc を使用して Web ページ上に円を描く方法を編集者が紹介したものです。気に入っていただければ幸いです。