【１５】アリクイあくしょんコード解説　691行目〜ラスト

// キャンバスのリサイズ
function resizeCanvas() {
  const aspect = 800 / 600; // アスペクト比
  let w = window.innerWidth;
  let h = window.innerHeight;
// アスペクト比を維持したまま、指定された領域にコンテンツを収める処理
  if (w / h > aspect) { // width ÷ height の答えが アス比（1.333...）より大きければ
    w = h * aspect; // width を height × 1.333...　にする
  } else {  // 最初の条件に当てはまらない（アス比より小さい）場合
    h = w / aspect; // height を width ÷ 1.333...　にする
  }

  if (!isTouchDevice()) {  // もしタッチデバイス以外（PC）なら実行
    w = Math.min(w, 800);  //最大で800
    h = Math.min(h, 600);  //最大で600
  }

  canvas.width = 800;   // 描画解像度は固定
  canvas.height = 600;
  canvas.style.width = w + "px";
  canvas.style.height = h + "px";
}
window.addEventListener("resize", resizeCanvas);
resizeCanvas();

アスペクト比（横縦比）

800 ÷ 600 = 1.333…
1.333…は、4 ÷ 3 の結果になるので、4:3 という比率を表してる。

window.innerWidth

JavaScript で「ブラウザの表示領域（ビューポート）の横幅（ピクセル単位）」を取得するプロパティ。

アスペクト比を保ちつつ、できるだけ大きく表示

  if (w / h > aspect) {  // width ÷ height の答えが アス比（1.333...）より大きければ横長、小さければ縦長
    w = h * aspect;  //横長の場合
  } else {
    h = w / aspect;  //縦長の場合
  }

w / h > aspect

これは、「今の横÷縦の比率（実際のサイズのアスペクト比）」が、

「理想のアスペクト比（aspect）」より**大きいか？」を調べている。

w / h は「横の長さは縦の何倍か」を表す。

例えば：

• 幅：1920px
• 高さ：1080px

1920 ÷ 1080 = 1.777…

➡️ 「横が縦の約1.78倍」

実際の比率が「1.777…」で理想が「1.333…」なら
→ 今の幅が「理想より横に伸びすぎ」って判断できる。
→ 横を縮めて調整しよう！

w = 1080 × 1.333… = 1440

→ 幅1440 高さ1080　（ 4:3 になった！）

Math.min(a, b)

aとbの小さい方を返す。

    w = Math.min(w, 800);
    h = Math.min(h, 600);

canvas

canvas.width = 800;   // 実際に描画される解像度
canvas.height = 600;
canvas.style.width = w + "px";   // 見た目の幅
canvas.style.height = h + "px";  // 見た目の高さ

設定	役割
canvas.width	描画の解像度（実ピクセル）
canvas.style.width	見た目の大きさ（CSSで調整）

✅ canvas.width / canvas.height（属性）

• 実際に描くピクセル数（内部の解像度）
• ここでは固定で「800×600」で描く
• 絵をどれだけ細かく描くかに影響

✅ canvas.style.width / .height（スタイル）

• 画面に見えるサイズ（CSSの大きさ）
• ユーザーの画面サイズや比率に応じて w × h に拡大・縮小される
• これは「見た目のサイズ」なので、ピクセル数とは別！

canvas.style.width = "800px";

↑ は　↓ の形になるのとほぼ同じ意味。

<canvas style="width: 800px;"></canvas>

これは、JavaScriptが HTML の <canvas> 要素の style属性（インラインCSS） を 書き換えてる。

JavaScriptを使うと、たとえば：

• 画面サイズに応じてレイアウト変更
• ボタンを押したら色が変わる
• マウスを動かしたらサイズが伸びる

などの「動きのあるUI」が実現できるのは、JSがCSSを書き換えているから。

もし w = 400, h = 300 だったら

• 描画解像度は 800×600（中身はそのまま）
• しかし画面上では 400×300 に縮小表示される

➡️ 解像度を保ったまま、キレイに縮小して表示できる！

なぜ "px" をつける？

CSS（スタイル）では、数値だけじゃなくて単位も必要だから。

JavaScript値	CSSとして必要な形式
600	❌ → エラーや無視される可能性
"600px"	✅ → 正しいCSS（600ピクセル）

ウィンドウのサイズが変わったときに canvas を自動でリサイズする

window.addEventListener("resize", resizeCanvas); // ← ウィンドウの大きさが変わるたび実行  
resizeCanvas(); // ← 最初の1回、自動で実行

window.addEventListener(“resize”, resizeCanvas);

ブラウザのウィンドウサイズが変更されたら、resizeCanvas という関数を呼び出す

最後に