HTML canvas drawImage() Method

使用するイメージ：

例

キャンバスに画像を描画します：

JavaScriptを：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

»それを自分で試してみてください

ブラウザのサポート

表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。

方法
drawImage()	4.0	9.0	3.6	4.0	10.1

定義と使用法

drawImage()メソッドは、キャンバス上に画像、キャンバス、またはビデオを描画します。

drawImage()メソッドは、画像の部分を引く、および/または増加/画像サイズを縮小することができます。

JavaScriptの構文

キャンバス上の画像を置き：

JavaScriptシンタックス：	context 。 drawImage( img,x,y ) ;

キャンバスに画像を置き、画像の幅と高さを指定します。

JavaScriptシンタックス：	context 。 drawImage( img,x,y,width,height ) 。

画像をクリップし、キャンバス上にクリップされた部分を配置します：

JavaScriptシンタックス：	context 。 drawImage( img,sx,sy,swidth,sheight,x,y,width,height ) 。

パラメータ値

パラメーター	説明	それを再生します
img	使用する画像、キャンバス、またはビデオ要素を指定します。
sx	任意。クリッピングを開始する場所のx座標	それを再生します»
sy	任意。クリッピングを開始する場所のY座標	それを再生します»
swidth	任意。切り出し画像の幅	それを再生します»
sheight	任意。切り出し画像の高さ	それを再生します»
x	キャンバス上に画像を配置する場所のx座標	それを再生します»
y	キャンバス上に画像を配置する場所のY座標	それを再生します»
width	任意。使用する画像の幅(stretch or reduce the image)	それを再生します»
height	任意。使用する画像の高さ(stretch or reduce the image)	それを再生します»

その他の例

例

キャンバスに画像を置き、画像の幅と高さを指定します。

JavaScriptを：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180);

»それを自分で試してみてください

例

画像をクリップし、キャンバス上にクリップされた部分を配置します：

JavaScriptを：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,50,60,10,10,50,60);

»それを自分で試してみてください