HTMLキャンバスdrawImage()メソッド
定義と用法
drawImage() 方法はキャンバス上に画像、キャンバスまたはビデオを描画します。
drawImage() このメソッドは、画像の一部を描画することも、画像のサイズを増加または減少させることもできます。
例
例1
使用する画像：
キャンバスに画像を描画します：
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10);
ヒント：ページの下部にさらに多くの例があります。
文法
JavaScript语法1
キャンバス上に画像を配置します：
context.drawImage(img,x,y);
JavaScript语法2
キャンバス上に画像を配置し、画像の幅と高さを指定します：
context.drawImage(img,x,y,width,height);
JavaScript语法3
画像をカットアウトし、キャンバス上にカットアウトされた部分を配置します：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
パラメータの値
| パラメータ | 説明 |
|---|---|
| img | 使用する画像、キャンバス、またはビデオを指定します。 |
| sx | オプション。カットアウトを開始するx座標位置。 |
| sy | オプション。カットアウトを開始するy座標位置。 |
| swidth | オプション。カットアウトされた画像の幅。 |
| sheight | オプション。カットアウトされた画像の高さ。 |
| x | キャンバス上に配置する画像のx座標位置。 |
| y | キャンバス上に配置する画像のy座標位置。 |
| width | オプション。使用する画像の幅。（画像を伸ばしたり縮めたりします） |
| height | オプション。使用する画像の高さ。（画像を伸ばしたり縮めたりします） |
さらに多くの例
例2
画像をキャンバス上に配置し、画像の幅と高さを指定します：
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 10, 10, 240, 160);
例3
画像をカットアウトし、キャンバス上にカットアウトされた部分を配置します：
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 90, 80, 20, 20, 90, 80);
例4
使用するビデオ（プレイボタンを押してデモを開始してください）：
キャンバス：
JavaScript（毎20ミリ秒、コードはビデオの現在フレームを描画します）：
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()}
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
ブラウザのサポート
このテーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注記：Internet Explorer 8 以降のバージョンでは <canvas> 要素をサポートしていません。
