JavaScript | Canvasに四角形を描画する方法
JavaScriptでCanvasに枠線のみ、枠線なし、枠線ありしのそれぞれの四角形を描画する方法を紹介しています。
Canvasに四角形を描画する
JavaScriptでCanvasに各タイプ別の四角形を描画するサンプルコードになります。
左から枠線のみ、枠線なし、枠線ありの四角形となっています。
See the Pen JavaScript Canvas circle by yochans (@yochans) on CodePen.
HTMLはcanvas要素にid=canvasを指定しています。
<canvas id="canvas"></canvas>枠線のみ、枠線なし、枠線ありそれぞれのタイプの四角形を描画します。
一度に複数の図形を描画する場合、パスをbeginPath()でリセットする必要があります（新しいパスを開始）。
このサンプルでは四角形の描写にはrect()メゾッドを利用しています。
context.rect( x座標, y座標, 横幅, 高さ);四角形の色を付けるにはfill()、枠線を付けるにはstroke()を利用します。
それぞれ、fillStyle、strokeStyleでカラネームまたはrgb(a)にて色を指定可能です。
枠線の太さはlineWidthで指定する事ができます。
//コンテキストを取得
let canvas = document.querySelector('#canvas');
let context = canvas.getContext('2d');
// 枠線のみ
context.beginPath();
context.rect( 20, 20,80, 80);
context.strokeStyle = 'deepskyblue';
context.lineWidth = 4;
context.stroke();
// 枠線なし
context.beginPath();
context.rect( 110, 20, 80, 80);
context.fillStyle = "lightskyblue";
context.fill();
//枠線あり
context.beginPath();
context.rect( 200, 20, 80, 80);
context.fillStyle = "lightskyblue";
context.fill();
context.strokeStyle = 'deepskyblue';
context.lineWidth = 4;
context.stroke();