フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Canvasの基本 画像を表示する

canvas内に画像を読み込んで表示するためにはdrawImageメソッドを使用します。引数の数によって3パターンの描画方法を使うことができます。

画像を表示する
drawImage ( src, x, y )
src
表示する画像のパスを文字列で記述します。相対パスも使用できます。
x、y
画像を表示する場所を指定します。
画像を縮小・拡大して表示する
drawImage ( src, x, y, width, height )
src
表示する画像のパスを文字列で記述します。相対パスも使用できます。
x、y
画像を表示する場所を指定します。
width、height
表示する画像の大きさを指定します。
画像をトリミングして表示する
drawImage ( src, sourceX, sourceY, sourceWidth, sourceHeight, drawX, drawY, drawWidth, drawHeight )
src
表示する画像のパスを文字列で記述します。相対パスも使用できます。
sourceX、sourceY
srcから切り出す部分の左上の座標を指定します。
sourceWidth, sourceHeight
srcから切り出す部分の幅と高さを指定します。
drawX, drawY
画像を表示する場所を指定します。
drawWidth, drawHeight
表示する画像の大きさを指定します。
サンプル

実際に描画を行うためには、対象となる画像のダウンロードを行う必要があります。ダウンロードの完了を待ってから描画処理に映るように、addEventLintenerでイベントとして処理を登録します。以下はそのサンプルです。

var img = new Image();
// Imageオブジェクトにloadイベントを登録
img.addEventListener('load', function(){
    // 描画
    context.drawImage(this, 0, 0);
}, false);

// 画像の読み込み
img.src = 'picture01.jpg';