HTML canvas drawImage() Method

使用するイメージ：

スクリーム

例

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

JavaScriptを：

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

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

ブラウザのサポート

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

方法
drawImage()	はい	9.0	はい	はい	はい

定義と使用法

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

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

	注意：あなたが呼び出すことはできませんdrawImage()イメージがロードされる前にメソッドを。画像がロードされていることを確認するには、呼び出すことができますdrawImage() from window.onload() 、またはからdocument.getElementById(" imageID ").onload 。

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を：

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

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

例

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

JavaScriptを：

window.onload = function() {
    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);
};

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