JavaScript を使用して HTML5 キャンバスに円を描く

グラフィックは、Web アプリケーションの重要な部分です。HTML は、グラフィックを作成する 2つの方法を提供します。1つは canvas で、もう 1つは SVG です。今日の記事では、キャンバスと JavaScript を使用して HTML でグラフィックス、特に円（2 次元）を作成する方法を学習します。

HTML で JavaScript を使用して canvas で円を描く

Canvas は、Web アプリケーションでグラフィックを描画するために使用される HTML によって提供されるデフォルトの要素です。これは、境界線やコンテンツのないページ上の長方形の領域に他なりません。ユーザーはこの長方形の領域を使用してグラフィックを描画できます。

キャンバスにレンダリングされるグラフィックは、通常の HTML および CSS スタイルとは異なります。そこに含まれるすべてのグラフィックを含むキャンバス全体は、単一の dom 要素として扱われます。

HTML の canvas のメソッド

1. getContext()：canvas によって提供される組み込みメソッドであり、contextType に応じてキャンバス上の描画コンテキストを返します。コンテキスト識別子がサポートされていないか、すでに設定されている場合は、null が返されます。サポートされているコンテキストタイプは、2d、webgl、webgl2、および bitmaprenderer です。
2. beginPath()：パスを開始するか、既存のパスをリセットしてグラフィックを描画する、canvas によって提供される組み込みメソッドです。
3. arc()：これは、canvas によって提供される組み込みメソッドであり、入力パラメーターに基づいて現在のパス上に円の円弧を作成するために使用されます。
4. fill()：これは、canvas によって提供される組み込みメソッドであり、現在のパスを指定された色で塗りつぶすために使用されます。ユーザーは、nonzero や evenodd のような地域を指定することもできます。
5. stroke()：これは、canvas によって提供される組み込みメソッドであり、指定されたストロークスタイルで現在のパスの輪郭を描くために使用されます。

arc の構文

context.arc(
    $centerX, $centerY, $radius, $startAngle, $endAngle, $counterclockwise);

パラメーター

• $centerX：これは、X または円の水平座標/中心点を指定する必須パラメーターです。
• $centerY：これは、円の Y または垂直座標/中心点を指定する必須パラメーターです。
• $radius：円の半径を指定する必須パラメーターです。これは正でなければなりません。
• $startAngle：これは、正の x 軸から測定されたラジアン単位で円弧の開始角度を指定する必須パラメーターです。
• $endAngle：これは、正の x 軸から測定されたラジアン単位で円弧の終了角度を指定する必須パラメーターです。たとえば、完全な円の場合は 2 * Math.PI です。
• $counterclockwise：これは、円が時計回りまたは反時計回りにどのように描画されるかを示すブール値を指定するオプションのパラメーターです。デフォルト値は false です。

JavaScript キャンバスを使用して円を描く手順

コード例：

<canvas id="myCanvas" width="500" height="200"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;

context.beginPath();
context.fillStyle = '#0077aa';
context.strokeStyle = '#0077aa47';
context.lineWidth = 2;

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
</script> 

出力：