HTML canvas drawImage()メソッド

使用する画像：

The Scream

例

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

JavaScript：

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

試してみる »

ブラウザサポート

Internet Explorer 9、Firefox、Opera、Chrome、Safari は drawImage() メソッドをサポートしています。

注意：Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。

定義と用法

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	オプション。使用する画像の幅（画像を伸縮）。
height	オプション。使用する画像の高さ（画像を伸縮）。

その他の例

例

キャンバス上に画像を配置し、画像の幅と高さを指定する：

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);

試してみる »