English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML リファレンスマニュアル

HTML タグ一覧

HTML canvas drawImage() メソッド

drawImage() メソッドは、Canvas上に画像を描画するためのさまざまな方法を提供します。

HTML canvas 参考書

使用する画像：

};

キャンバスに画像を描画：

画像をカットアウトし、キャンバス上にカットアウトされた部分を配置します：5 あなたのブラウザはHTML 
サンプル
<!DOCTYPE　html>
<html>
<ヘッド>-8<メタ　charset="utf
">-<タイトル>HTML　キャンバス　drawImage()　メソッドの使用3codebox.com)</タイトル>
</ヘッド>
<ボディ>
キャンバス上に画像を配置し、画像の幅と高さを指定します：/p>
<p>画像の適用:<
<img　id="scream"　src="views.png">/p>
<キャンバス　id="myCanvas"　幅="3<p>キャンバス:<2<p>使用する画像:<1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。
</canvas>

var　c=document.getElementById("myCanvas");
document.getElementById("scream").onload=function()2var　ctx=c.getContext("
d");
00"スタイル="ボーダー:
{
　　　　var　img=document.getElementById("scream");10,10);
img.onload　=　function()
</script>
</body>
</html>
テストを見て‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari は drawImage() をサポートしています。 メソッド。

注意：Internet Explorer 8 及びその以前のバージョンでは <canvas> 要素をサポートしていません。

定義と使用方法

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

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

パラメータ値

パラメータ説明
img使用する画像、キャンバス、またはビデオを指定。　
sxオプション。カット開始の x 座標位置。
syオプション。カット開始の y 座標位置。
swidthオプション。カットされた画像の幅。
sheightオプション。カットされた画像の高さ。
xキャンバスに画像を配置する x 座標位置。
yy
キャンバス上に画像を配置するy座標位置。幅
オプション。使用する画像の幅（画像を伸ばしたり縮めたり）。高さ

};

オプション。使用する画像の高さ（画像を伸ばしたり縮めたり）。

画像をカットアウトし、キャンバス上にカットアウトされた部分を配置します：5 あなたのブラウザはHTML 
サンプル
<!DOCTYPE　html>
<html>
<ヘッド>-8<メタ　charset="utf
">-<タイトル>HTML　キャンバス　drawImage()　メソッドの使用3codebox.com)</タイトル>
</ヘッド>
<ボディ>
キャンバス上に画像を配置し、画像の幅と高さを指定します：/p>
<p>画像の適用:<
<img　id="scream"　src="views.png">/p>
<キャンバス　id="myCanvas"　幅="250"高さ="3<p>使用する画像:<1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。
</canvas>

var　c=document.getElementById("myCanvas");
document.getElementById("scream").onload=function()2var　ctx=c.getContext("
d");
00"スタイル="ボーダー:
{
　　　　var　img=document.getElementById("scream");10,10,150,180);
img.onload　=　function()
</script>
</body>
</html>
テストを見て‹/›

};

}

画像をカットアウトし、キャンバス上にカットアウトされた部分を配置します：5 あなたのブラウザはHTML 
サンプル
<!DOCTYPE　html>
<html>
<ヘッド>-8<メタ　charset="utf
">-<タイトル>HTML　キャンバス　drawImage()　メソッドの使用3codebox.com)</タイトル>
</ヘッド>
<ボディ>
キャンバスタグ。/p>
<p>画像の適用:<
<img　id="scream"　src="views.png">/p>
<キャンバス　id="myCanvas"　幅="3<p>キャンバス:<1500"高さ="1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。
</canvas>

0"スタイル="ボーダー:
{
　　　　var　c=document.getElementById("myCanvas");
　　　　document.getElementById("scream").onload=function()2var　ctx=c.getContext("
　　　　d");
　　　　var　img=document.getElementById("scream");90,130,50,60,10,10,50,60);
ctx.drawImage(img,
</script>
</body>
</html>
テストを見て‹/›

};

オンラインサンプル

使用するビデオ（再生ボタンを押してデモを開始してください）：

キャンバス：

あなたのブラウザはcanvasタグをサポートしていません 2JavaScript（各

サンプル
<!DOCTYPE　html>
<html>
<ヘッド>-8<メタ　charset="utf
">-<タイトル>HTML　キャンバス　drawImage()　メソッドの使用3codebox.com)</タイトル>
</ヘッド>
<ボディ>
<p>使用するビデオ:</p>
<ビデオ　id="video1"　コントロール　幅="270"オートプレイ>
　　　　<ソース　src="movie.mp4"　type=&39;ビデオ/mp4'>
　　　　<ソース　src="movie.ogg"　type=&39;ビデオ/ogg#39;>
　　　　<ソース　src="movie.webm"　type=&39;ビデオ/webm#39;>
</ビデオ>
<p>キャンバス（コードは各20ミリ秒で現在のビデオフレームを描画):</p>
<キャンバス　id="myCanvas"　幅="270"高さ="135"スタイル="ボーダー:1px　solid　#d3d3d3>
あなたのブラウザはHTMLをサポートしていません5　canvas　タグ。
</canvas>

var　v=document.getElementById("video",1");
var　c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',　function()　
{
　　　　var　i=window.setInterval(function()　{ctx.drawImage(v,5,5,260,125)},20);
},false);
v.addEventListener('pause',function()　
{
　　　　window.clearInterval(i);
},false);
v.addEventListener('ended',function()　
{
　　　　clearInterval(i);
},false);　　
</script>
</body>
</html>
テストを見て‹/›
HTML canvas 参考書
HTML: <template> タグ