【JavaScript入門】図形の描画

　Web ブラウザの <canvas> 要素を使うと、JavaScript だけで四角形や円、折れ線グラフのような図形をインタラクティブに描画できます。Canvas では「パス (path)」という線や点の集合体を作り、そのパスを 塗りつぶす (fill) か 線を引く (stroke) かを選びます。ここでは、塗りつぶし・線描画の基本設定から状態の保存・復帰までを段階的に学び、最後に動くサンプルで確認します。

１．Canvas 基本操作

1.1. HTML に `<canvas>` を配置する

まずは幅と高さを指定してキャンバス領域を用意します。
id を与えて JavaScript から参照できるようにします。

1.2. 描画コンテキストを取得する

const canvas  = document.getElementById('stage');
const ctx     = canvas.getContext('2d');   // 2D 描画専用オブジェクト

getContext('2d') で取得した 2D コンテキスト (ctx) に対してすべての描画命令を出します。

1.3. 塗りつぶしの設定

プロパティ	概要	使用例
`fillStyle`	塗りつぶし色やパターンを CSS 互換の書式で指定	`ctx.fillStyle = '#34c3ff'ctx.fillStyle = 'rgba(255,0,0,.4)'`

例 ctx.fillStyle = '#34c3ff'; は R=0x34 G=0xc3 B=0xff を持つシアン系の色になります。

1.4. 線描画の設定

プロパティ	概要	使用例
`strokeStyle`	線の色を指定	`ctx.strokeStyle = 'lime'`
`lineWidth`	線幅 (px)	`ctx.lineWidth = 4`
`lineCap`	線端形状	`ctx.lineCap = 'round'`
`lineJoin`	角の形状	`ctx.lineJoin = 'miter'`

lineWidth を大きくするとパスの中心線を基準に内外へ半々ずつ太くなる点に注意します。

２．パスと描画制御

2.1. パスを作成して描画

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100,120);
ctx.closePath();      // 始点に戻り三角形完成
ctx.fill();           // または ctx.stroke();

beginPath() で新しいパスを開始し、closePath() で自動的に始点へ戻ります。

2.2. 透明度と合成

プロパティ	概要	例
`globalAlpha`	0.0 (完全透明)〜1.0 (完全不透明) を設定	`ctx.globalAlpha = 0.6`

複数の図形を半透明で重ね合わせたいときに利用します。

2.3. 状態の保存と復帰

メソッド	概要
`save()`	直前の描画設定をスタックに積む
`restore()`	スタック最上位の設定を取り出して適用

ctx.save();               // 現在設定を退避
ctx.lineWidth = 10;
ctx.strokeRect(20,20,60,60);
ctx.restore();            // lineWidth が元に戻る

　save()/restore() は入れ子にできるので、大きなシーン構築時に設定を局所的に変更するのに役立ちます。

３．サンプルプログラムで確認

ファイル名： shapes_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🎨 Canvas Shapes Demo</title>
<style>
  body{font-family:"Segoe UI",sans-serif;background:#eef6ff;text-align:center;margin:2rem}
  h1  {font-size:1.8rem;margin-bottom:1rem}
  canvas{border:1px solid #999;border-radius:6px}
  #msg{margin-top:.8rem;font-weight:bold;color:#1565c0}
</style>
</head>
<body>
  <h1>🎨 図形の描画デモ</h1>
  <canvas id="stage" width="240" height="180"></canvas>
  <p id="msg">キャンバスに図形を描きました！</p>

<script>
(function(){
  const cvs = document.getElementById('stage');
  const ctx = cvs.getContext('2d');

  /* --- 四角形を塗りつぶし --- */
  ctx.fillStyle = '#ffd54f';      // 黄色
  ctx.fillRect(10, 10, 100, 60);

  /* --- 枠線付き円を描画 --- */
  ctx.beginPath();
  ctx.arc(170, 50, 30, 0, Math.PI*2); // x,y,r,開始角,終了角
  ctx.closePath();
  ctx.strokeStyle = 'steelblue';
  ctx.lineWidth   = 4;
  ctx.stroke();

  /* --- 三角形を半透明で重ねる --- */
  ctx.save();                     // 状態保存
  ctx.globalAlpha = 0.5;
  ctx.fillStyle   = 'rgba(244,67,54,1)'; // 赤
  ctx.beginPath();
  ctx.moveTo(60,120);
  ctx.lineTo(30,170);
  ctx.lineTo(90,170);
  ctx.closePath();
  ctx.fill();
  ctx.restore();                  // 透明度など元へ
})();
</script>
</body>
</html>

ブラウザの出力例

左上に黄色い矩形。
右上に青い円の輪郭。
下部に赤い半透明の三角形が重なり、矩形の端が透けて見える。
その下に 「キャンバスに図形を描きました！」 と日本語メッセージ。

プログラム解説（要点）

即時関数 (IIFE) でグローバル汚染を防止。
fillRect() はパス不要で矩形を素早く塗る便利ショートカット。
円は arc()、三角形は moveTo/lineTo を組み合わせたパスで作成。
三角形だけを半透明にしたいので save() → globalAlpha → 描画 → restore()。これで他の図形の設定は元通りに。

まとめ

Canvas では 塗りつぶし (fill) と 線描画 (stroke) を切り替えながら図形を合成。
描画色や線幅などは プロパティ で即時変更でき、save() / restore() でスコープ管理すると複雑なシーンでも迷わない。

　今日学んだ基本を踏まえれば、多角形・グラデーション・パーティクル表現へと自由に発展できます。ぜひコードを改造してオリジナルの図形を描いてみてください！

【JavaScript入門】図形の描画