SYNCERのロゴ
アイキャッチ画像

画像を描画する方法

Canvasで画像を描画するには、コンテキストのdrawImage()を利用しましょう。

サンプルコード

下記は、250x150の画像を、キャンパス内の100x75のスペースに描画するサンプルコードです。引数が多いので整理して理解しておきましょう。要は、画像のどの部分を、キャンパスのどの部分に描画するか、ということです。

// element = <canvas width="200" height="200"></canvas>
var context = element.getContext( "2d" ) ;

// 画像のパス
var url = "./image.png" ;

var image = new Image() ;

image.onload = function () {
	// パスをリセット
	context.beginPath() ;

	// 画像のオブジェクト (this)
	// 画像の(0,0)から横幅200、高さ150の範囲を…
	// キャンパスの(50,50)から横幅100、高さ75の範囲に描画
	context.drawImage( this, 0, 0, 200, 150, 50, 50, 100, 75 ) ;
}

image.src = url ;

デモ

パスから画像を描画するサンプルコードです。引数を調整して、どのように反映されるのか確認してみて下さい。

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

var url = "./image.png" ;
var image = new Image() ;

image.onload = function () {
	context.beginPath() ;
	context.drawImage( this, 0, 0, 400, 400, 50, 50, 100, 100 ) ;
}

image.src = url ;

200x200のキャンパスです。

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月3日 (木)
コンテンツを公開しました。