Canvas上のテキストと画像
Canvasにテキスト文字列を描画し、画像を表示します
「Canvas上のテキストと画像」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
テキストの描画
フォントを設定します: ctx.font = "bold 24px sans-serif"。描画にはctx.fillText("Hello", x, y)またはctx.strokeText("Hello", x, y)を使用します。y座標はテキストのベースラインです。バウンディングボックス内に正しく配置するには、その上にアセンダーの高さを加えます。
テキストの配置
ctx.textAlignは水平方向の配置を制御します: 「left」（デフォルト）、「center」、「right」。ctx.textBaselineは、yを基準にした垂直方向の配置を制御します: 「top」、「middle」、「alphabetic」（デフォルト）、「bottom」。テキストを中央揃えにするには、両方を「center」と「middle」に設定します。
レイアウト用のmeasureText
ctx.measureText("text")は、幅やフォントのメトリクスを持つTextMetricsオブジェクトを返します。これを使うと、テキストの位置を動的に計算できます。たとえば、ボックス内での中央揃え、最大幅での折り返し、データポイントの横にあるラベルの右揃えなどに利用できます。
テキストの折り返し
Canvasにはテキストの折り返し機能が組み込まれていません。自分で実装するには、単語ごとの幅を測定し、maxWidthを超えるまで蓄積してから、lineHeight間隔で次の行に移します。これはCanvas描画ライブラリでよく使われるユーティリティ関数です。
画像の描画
ctx.drawImage(image, dx, dy)は、HTMLImageElement、HTMLCanvasElement、またはHTMLVideoElementを（dx, dy）の位置に描画します。描画前に画像を読み込み、ピクセルを利用できるようにonloadハンドラー内で描画します。
const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "photo.jpg";画像の拡大縮小
ctx.drawImage(image, dx, dy, dw, dh)は、画像をdw x dhのサイズに拡大縮小します。アスペクト比は自動的には維持されないため、サイズを手動で計算します。アスペクト比を維持するには、dw = img.width * scale; dh = img.height * scaleとします。
画像のトリミング
9個の引数を取るdrawImage: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)。ソースの長方形（sx, sy, sw, sh）で画像から切り出し、デスティネーションの長方形（dx, dy, dw, dh）でキャンバス上に配置および拡大縮小します。
画像のスムージング
ctx.imageSmoothingEnabled = falseは、画像を拡大縮小するときのバイリニア補間を無効にします。鮮明で滑らかにしない拡大縮小が望ましいピクセルアートに使用します。写真など、滑らかな拡大縮小のほうが適している画像では、有効（デフォルト）のままにします。
画像ソースとしてのCanvas
CanvasをdrawImageのソースとして渡すと、1つのCanvasを別のCanvasに描画できます。これによりオフスクリーン描画が可能になります。非表示のCanvasに複雑な合成画像を描画し、そのCanvasを各フレームで1回の操作で表示用Canvasに描画します。
globalAlphaと合成
ctx.globalAlpha（0から1）は、以降のすべての描画に一律の透明度を適用します。ctx.globalCompositeOperationは、新しい描画を既存のピクセルとどのように合成するかを制御します。「source-over」（デフォルト）、「multiply」、「screen」、「destination-out」（消去）などがあります。
エクスポート用のtoDataURL
canvas.toDataURL("image/png")は、CanvasをBase64形式のPNGデータURLとしてエクスポートします。ユーザーが開始するダウンロードに使用するには、アンカー要素を作成し、hrefにデータURL、download属性にファイル名を設定してから、プログラムでクリックします。
理解度チェック
テキストを描画するとき、ctx.textBaseline = "middle"は何に影響しますか？
まとめ
Canvasでのテキスト描画では、ctx.font、fillText/strokeText、textAlign、textBaselineを使って位置を調整し、measureTextでレイアウトを計算します。drawImageによる画像描画では、拡大縮小とトリミングが可能です。globalAlphaとglobalCompositeOperationで合成を制御できます。toDataURLを使うと、Canvasをダウンロードやその他の用途に利用できる形式でエクスポートできます。
よくある質問
「Canvas上のテキストと画像」レッスンは無料ですか？
はい。「Canvas上のテキストと画像」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「Canvas上のテキストと画像」で何を学びますか？
Canvasにテキスト文字列を描画し、画像を表示します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Canvas上のテキストと画像」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。