JavaScript | Canvasに円を描画する方法
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();