JavaScript | Canvasに四角形を描画する方法

JavaScript Canvas 2D,JavaScript

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();