HTMLキャンバスdrawImage（）メソッド

使用する画像：

例

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

JavaScript：

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

ブラウザのサポート

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

Method
drawImage()	Yes	9.0	Yes	Yes	Yes

定義と使用法

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

drawImage（）メソッドは、画像の一部を描画したり、画像サイズを拡大/縮小したりすることもできます。

注：画像が読み込まれる前にdrawImage（）メソッドを呼び出すことはできません。画像が確実に読み込まれるようにするには、window.onload（）またはdocument.getElementById（ " imageID "）。onloadからdrawImage（）を呼び出すことができます。

JavaScript構文

画像をキャンバスに配置します。

JavaScript syntax:	context.drawImage(img,x,y);

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

JavaScript syntax:	context.drawImage(img,x,y,width,height);

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

JavaScript syntax:	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

パラメータ値

Parameter	Description	Play it
img	Specifies the image, canvas, or video element to use
sx	Optional. The x coordinate where to start clipping
sy	Optional. The y coordinate where to start clipping
swidth	Optional. The width of the clipped image
sheight	Optional. The height of the clipped image
x	The x coordinate where to place the image on the canvas
y	The y coordinate where to place the image on the canvas
width	Optional. The width of the image to use (stretch or reduce the image)
height	Optional. The height of the image to use (stretch or reduce the image)

その他の例

例

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

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