JavaScript Academy · レッスン

Canvas コンテキストを設定する

Q: 「Canvas コンテキストを設定する」で何を学びますか？

2D 描画コンテキストを取得して設定します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

2D 描画コンテキストを取得して設定します。

「Canvas コンテキストを設定する」はCoddyKit上の無料JavaScript Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

Canvas API とは

Canvas API を使うと、JavaScript で <canvas> 要素に2Dグラフィックスを描画できます。ピクセルで構成された描画面と、図形、画像、テキストを描画するための一連のコマンドを利用できます。

マークアップは単一の <canvas> タグです。
描画はすべて、JavaScript から コンテキスト オブジェクトを通して行います。

<canvas id="board" width="320" height="200"></canvas>

コンテキストの取得

canvas 要素で getContext('2d') を呼び出すと、CanvasRenderingContext2D を取得できます。すべての描画コマンドはこのオブジェクトを通して実行します。

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2D

座標系

原点 (0, 0) は左上の角です。Xは右方向に、Yは下方向に増加します。320x200のキャンバスでは、右下の角は (320, 200) です。

幅と高さの属性

width と height のHTML属性で、ピクセル単位の描画バッファのサイズを設定します。省略した場合のデフォルト値は300x150です。JavaScriptでこれらを設定すると、キャンバスも消去されます。

const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300

CSSサイズとバッファサイズ

CSSの width/height は画面上のキャンバスを引き伸ばしますが、ピクセルバッファは変更しません。これらが属性の値と異なると、描画がぼやけたり引き伸ばされたりします。鮮明に表示するには、両者を同期させてください。

canvas.width = 400;  // buffer pixels
canvas.style.width = "400px"; // display size — match it

高DPI画面への対応

Retinaディスプレイでは、devicePixelRatio が2であることがよくあります。バッファを拡大し、コンテキストを縮小することで、線を鮮明に保てます。

const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);

塗りつぶしと線のスタイルの設定

描画状態はコンテキストに保持されます。fillStyle は塗りつぶしの色を、strokeStyle は輪郭線の色を設定します。どちらにも任意のCSSカラー文字列を指定できます。

ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;

最初の描画

コンテキストの準備ができたら、すぐに描画できます。fillRect(x, y, w, h) は現在の fillStyle を使って、塗りつぶした長方形を描画します。

const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);

キャンバスの消去

clearRect(x, y, w, h) は、長方形の領域を透明な状態に戻します。アニメーションの各フレームで、最初にバッファ全体を消去するのが一般的です。

ctx.clearRect(0, 0, canvas.width, canvas.height);

状態の保存と復元

save() は現在のスタイルと変換をスタックに積み、restore() はそこから取り出して復元します。これにより、一時的な変更を分離できます。

ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous value

機能検出

非常に古いブラウザーにも対応するため、使用する前に getContext が存在することを確認します。

const canvas = document.getElementById("board");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // safe to draw
} else {
  console.log("Canvas not supported");
}

クイックチェック

キャンバスのセットアップについての理解度を確認します。

まとめ: Canvas のセットアップ

キャンバスの取得、getContext('2d') の呼び出し、左上を原点とする座標系の理解、バッファサイズとCSSサイズの設定、devicePixelRatio を使った高DPI対応、fillStyle/strokeStyle の設定について学びました。次は、図形とパスの描画です。

よくある質問

「Canvas コンテキストを設定する」レッスンは無料ですか？

はい。「Canvas コンテキストを設定する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「Canvas コンテキストを設定する」で何を学びますか？

2D 描画コンテキストを取得して設定します。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Canvas コンテキストを設定する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← JavaScript Academyに戻る