画像とテキストを扱う
Canvas に画像とスタイル付きテキストを描画します。
「画像とテキストを扱う」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
画像の読み込み
Canvasでは HTMLImageElement から描画します。Image を作成して src を設定し、描画する前に onload を待ちます。ピクセルはそれまで利用できません。
const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";drawImage の基本
drawImage(img, dx, dy) は、指定した位置に画像を本来のサイズで描画します。
img.onload = () => {
ctx.drawImage(img, 20, 20);
};画像の拡大縮小
5引数形式の drawImage(img, dx, dy, dWidth, dHeight) は、画像を指定した領域に合わせて拡大縮小します。
ctx.drawImage(img, 0, 0, 160, 90); // fit into 160x90ソース矩形による切り抜き
9引数形式を使うと画像を切り抜けます。drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) の最初の4つの引数で、元画像から切り出す範囲を指定します。
ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); // crop 50x50 → scale to 100x100塗りつぶしテキストの描画
fillText(text, x, y) は、fillStyle を使ってテキストを描画します。デフォルトでは、yはテキストのベースラインです。
ctx.fillStyle = "#2c3e50";
ctx.font = "24px sans-serif";
ctx.fillText("Hello Canvas", 20, 50);輪郭線付きテキスト
strokeText(text, x, y) は、strokeStyle と lineWidth を使って輪郭だけを描画します。
ctx.font = "40px bold serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "navy";
ctx.strokeText("Outline", 20, 80);font プロパティ
font はCSSのショートハンドに従います。形式は [style] [weight] size family です。サイズとファミリーは必須です。
ctx.font = "italic bold 28px Georgia, serif";テキストの配置
textAlign（start/end/left/right/center）は水平方向の基準位置を、textBaseline（top/middle/alphabetic/bottom）は指定した点を基準とする垂直方向の位置を設定します。
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);テキストの測定
measureText(text) は TextMetrics オブジェクトを返します。その width から、描画時のテキストの幅がわかります。レイアウトや折り返しに欠かせません。
const m = ctx.measureText("How wide?");
console.log(m.width); // pixelsシンプルな単語の折り返し
measureText とループを組み合わせると、長い文字列を複数行に折り返せます。
function wrap(ctx, text, x, y, maxW, lh) {
let line = "";
for (const word of text.split(" ")) {
const test = line + word + " ";
if (ctx.measureText(test).width > maxW && line) {
ctx.fillText(line, x, y);
line = word + " ";
y += lh;
} else {
line = test;
}
}
ctx.fillText(line, x, y);
}奥行きを出すための影
影のプロパティは、図形、画像、テキストに適用されます。shadowColor、shadowBlur、shadowOffsetX/Y を使います。
ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText("With shadow", 20, 60);クイックチェック
画像とテキストの描画についての理解度を確認します。
まとめ: 画像とテキスト
drawImage による画像の読み込み、拡大縮小、切り抜き、fillText/strokeText によるテキストの描画、font の設定、テキストの配置、measureText による幅の測定、影の追加について学びました。次は、アニメーションです。
よくある質問
「画像とテキストを扱う」レッスンは無料ですか？
はい。「画像とテキストを扱う」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「画像とテキストを扱う」で何を学びますか？
Canvas に画像とスタイル付きテキストを描画します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「画像とテキストを扱う」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。