【JavaScript入門】矩形の描画
矩形（長方形）は Canvas で最も頻繁に描かれる図形です。Canvas には “パスを組み立てて fill / stroke する” という原則がありますが、矩形だけは ショートカットメソッド が用意されており、1 行で塗りつぶし・枠線・消去を行えます。ここではそれら 3 メソッドの利用法と、背景全体の塗り替えや部分消去の実例を通して、矩形描画の基礎を学びます。
１．矩形専用メソッドの概要
| メソッド | 役割 | 主な引数 |
|---|---|---|
fillRect(x, y, w, h) | 指定領域を 塗りつぶす | 左上 x, y / 幅 w / 高さ h |
strokeRect(x, y, w, h) | 指定領域に 枠線を描く | 同上 |
clearRect(x, y, w, h) | 指定領域を 透明に戻す | 同上 |
1.1. 画面全体の塗りつぶし
ctx.fillStyle = '#faf7ef';
ctx.fillRect(0, 0, canvas.width, canvas.height);背景色を一括で変更したいときに便利です。
1.2. アニメーション時の消去
ctx.clearRect(0, 0, canvas.width, canvas.height);前フレームの残像を消してから次のフレームを描く典型パターンです。
２．サンプルプログラム
ファイル名： boxes_demo.html
PNGファイルのダウンロードは、ここ「checker.png」からできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🖼️ Canvas Rectangle Demo</title>
<style>
body {font-family:"Segoe UI",sans-serif;background:#eef4ff;text-align:center;margin:2rem}
h1 {font-size:1.8rem;margin-bottom:1rem}
canvas {border:1px solid #777;border-radius:6px;background:url(./checker.png)}
#info {margin-top:.8rem;color:#00695c;font-weight:bold}
</style>
</head>
<body>
<h1>🖼️ 矩形の描画デモ</h1>
<canvas id="board" width="420" height="260"></canvas>
<p id="info">キャンバスに矩形を描きました！</p>
<script>
(() => {
const cvs = document.getElementById('board');
const ctx = cvs.getContext('2d');
/* 背景を淡いグリーンで塗りつぶし */
ctx.fillStyle = '#d9fdd3';
ctx.fillRect(0, 0, cvs.width, cvs.height);
/* 塗りつぶし矩形 */
ctx.fillStyle = '#6c8cff'; // 青紫
ctx.fillRect(40, 40, 340, 180);
/* 線矩形（枠線は中心線が基準） */
ctx.strokeStyle = 'rgba(255,60,60,0.7)';
ctx.lineWidth = 20;
ctx.strokeRect(40, 40, 340, 180);
/* 一部を消去してチェック模様を再表示 */
ctx.clearRect(100, 90, 200, 90);
})();
</script>
</body>
</html>ブラウザの出力例
- 全体が淡いグリーンで塗りつぶされる。
- その上に青紫の矩形が描かれる。
- 赤みを帯びた半透明の太い枠線が矩形を囲む。
- 中央部 (横 200 × 縦 90 px) が透明に戻り、背景の市松模様がのぞく。
- 下に 「キャンバスに矩形を描きました！」 と日本語の説明。
プログラム解説 （抜粋）
| 行 | 内容 | ポイント |
|---|---|---|
| 11 | background:url(./checker.png) | 透明領域が確認しやすいよう市松模様を設定 |
| 25 | ctx.fillStyle = '#d9fdd3' | fillStyle は直前の fillRect だけに作用し、次の描画には引き継がれる |
| 31 | ctx.lineWidth = 20 | strokeRect の線幅はパス中央基準なので外側へ 10 px、内側へ 10 px 広がる |
| 34 | ctx.clearRect(...) | 消去後は完全な透明ピクセルになるため、canvas 背景 (checker.png) が見える |
まとめ
fillRect,strokeRect,clearRectの 3 メソッドで矩形操作は完結。- 背景塗りつぶしや領域消去は「全キャンバスサイズ」を引数に渡すと一発。
- 枠線を太くする場合は “線幅は中心線基準” を意識して座標やサイズを調整する。
これらをマスターすれば、ダッシュボードのパネル描画やゲームのヒットボックス表現など、実用的な UI パーツを簡潔なコードで実装できます。