JavaScript | Canvasに円を描画する方法

JavaScript Canvas 2D,JavaScript

JavaScriptでCanvasに枠線のみ、枠線なし、枠線ありしのそれぞれの円を描画する方法を紹介しています。

Canvasに円を描画する

JavaScriptでCanvasに各タイプ別の円を描画するサンプルコードになります。

左から枠線のみ、枠線なし、枠線ありの円となっています。

See the Pen JavaScript cv by yochans (@yochans) on CodePen.

このサンプルではHTMLはcanvas要素にid=canvasを指定しています。

<canvas id="canvas"></canvas>

枠線のみ、枠線なし、枠線ありそれぞれのタイプの円を描画します。

一度に複数の図形を描画する場合、パスをbeginPath()でリセットする必要があります。

円の描画にはarc()メゾットを利用しています。

context.arc( x座標, y座標, 半径, 0, Math.PI * 2, true);

円の色を付けるにはfill()、枠線を付けるにはstroke()を利用します。

それぞれ、fillStyle、strokeStyleでカラネームまたはrgb(a)にて色を指定可能です。
枠線の太さはlineWidthで指定する事ができます。

//コンテキストを取得
let canvas = document.querySelector('#canvas');
let context = canvas.getContext('2d');

// 枠線のみ
context.beginPath();
context.arc(50, 60, 40, 0, Math.PI * 2, true);
context.strokeStyle = 'deepskyblue';
context.lineWidth = 5;
context.stroke();

// 枠線なし
context.beginPath();
context.arc(140, 60, 40, 0, Math.PI * 2, true);
context.fillStyle = "lightskyblue";
context.fill();

//枠線あり
context.beginPath();
context.arc(230, 60, 40, 0, Math.PI * 2, true);
context.fillStyle = "lightskyblue";
context.fill();
context.strokeStyle = 'deepskyblue';
context.lineWidth = 5;
context.stroke();