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 プロパティで指定します。