HTML canvas drawImage() メソッド

使用する画像：

The Scream

例

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

JavaScript:

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

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、メソッドを完全にサポートした最初のブラウザ・バージョンを指定しています。

メソッド
drawImage()	Yes	9.0	Yes	Yes	Yes

定義と用法

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

drawImage() メソッドは、画像の一部を描くことも可能で、および/または画像サイズを拡大/縮小することができます。

注: 画像がロードされる前に、drawImage() メソッドを呼び出すことはできません。イメージがロードされていることを確認するには、window.onload() から、または document.getElementById("imageID").onload から 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);

パラメータの値

パラメータ	説明	Play it
img	使用するイメージ、キャンバス、またはビデオ要素を指定する
sx	任意。クリッピングを開始する x 座標	Play it ❯
sy	任意。クリッピングを開始する y 座標	Play it ❯
swidth	任意。クリップする画像の幅	Play it ❯
sheight	任意。クリップする画像の高さ	Play it ❯
x	キャンバスに画像を配置する場所の x 座標	Play it ❯
y	キャンバスに画像を配置する場所の y 座標	Play it ❯
width	任意。使用する画像の幅 (画像の拡大か縮小)	Play it ❯
height	任意。使用する画像の高さ (画像の拡大か縮小)	Play it ❯

その他の例

例

キャンバス上の画像の位置と、画像の幅と高さの指定：

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

Try it Yourself ❯

例

キャンバス上の画像のクリップと、クリップ部分の位置：

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

Try it Yourself ❯

例

使用するビデオ（デモンストレーションを開始するには再生を押してください）：

キャンバス：

JavaScript（コードは、20 ミリ秒ごとにビデオの現在のフレームを描画します）：

Try it Yourself ❯

HTML Canvas リファレンス