JavaScript: canvas に矩形を描画する

HTML5 Canvas API を使って、矩形を描画します。

矩形の枠線を描画するには strokeRect()メソッド、 矩形を塗りつぶすには fillRect()メソッドを使い、 矩形領域を消去するには clearRect() メソッドを使います。

それぞれのメソッドの書式は次の通りです。


// 矩形の枠線を描く
strokeRect(x, y, width, height);

// 矩形を塗りつぶす
fillRect(x, y, width, height);

// 矩形領域を消去する
clearRect(x, y, width, height);

x が左上の x 座標、y が左上の y 座標、width が幅、height が高さです。

canvas 要素の指定方法や、座標についての基本を知りたい人はこちらの記事をみてください。
準備編: Canvas を配置し、描画コンテキストを取得する

サンプルコード

上記3つのメソッドを実行するサンプルです。

HTML・CSS


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

<style>
    canvas {
        border: 1px solid silver;
    }
</style>

JavaScript


var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

// 矩形の枠線
c.lineWidth = 2; // 線幅
c.strokeStyle = 'red';
c.strokeRect(20, 25, 260, 100);

// 矩形を塗りつぶす
c.fillStyle = 'green';
c.fillRect(50, 50, 200, 50);

// 矩形領域の消去
c.clearRect(80, 65, 140, 20);

実行すると次のように表示されます。

外側から内側に向かって枠線(赤)、塗りつぶし(緑)、消去のメソッドを実行しています。

枠線の線幅を指定する場合は lineWidth プロパティで指定します。デフォルトは 1 で、単位は px です。

枠線の色を指定する場合は strokeStyle プロパティで指定します。

塗りつぶしの色を指定する場合は fillstyle プロパティで指定します。

JavaScript入門