Canvas 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> 要素をサポートしていません。
