(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';