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

画像を使用するには：

スクリーム

例

キャンバスの上に絵を描くには：

JavaScriptを：

するvar C =のdocument.getElementById（ "myCanvas"）;
するvar CTX = c.getContext（ "2D"）;
するvar IMG =のdocument.getElementById（ "悲鳴"）;
img.onload =関数（）{
ctx.drawImage（IMG、10,10）;
}

»をお試しください

ブラウザのサポート

Internet Explorer 9の、Firefoxの、オペラ、ChromeとSafariのサポートのdrawImage（）メソッド。

注：のInternet Explorer 8およびそれ以前のバージョンでは、<キャンバス>要素をサポートしていません。

定義と使用法

キャンバス上の画像、ビデオやキャンバスを描画するためのdrawImage（）メソッド。

drawImage（）メソッドへの特定の部分は、画像を描画、および/または画像のサイズを増減することができます。

JavaScriptシンタックス

キャンバス上の画像を配置します：

JavaScriptシンタックス：	コンテキスト.drawImage（IMG、X、Y）;

キャンバス上の画像を配置すると、画像の所定の幅と高さ：

JavaScriptシンタックス：	コンテキスト.drawImage（IMG、X、Y、幅、高さ）。

画像を切り取り、キャンバス上のカット部分をローカライズ：

JavaScriptシンタックス：	コンテキスト.drawImage（IMG、SX、SY、swidth、sheight、x、y、幅、高さ）;

パラメータ値

パラメータ	説明
IMG	使用したい画像を、キャンバスやビデオを所定の。
SX	オプション。 x位置の座標を切断開始します。
シリア	オプション。カットy座標を開始します。
swidth	オプション。これは、切断された画像の幅です。
sheight	オプション。高度に画像をカット。
X	場所は、xキャンバス上の画像の位置を調整します。
Y	キャンバス上の画像の位置のy座標を置きます。
幅	オプション。（画像を伸張または収縮によって）画像の幅を使用します。
高さ	オプション。あなたは（画像を伸張または縮小することによって）使用する画像の高さ。

より多くの例

例

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

JavaScriptを：

»をお試しください

例

画像を切り取り、および剪断さ部分のキャンバス上に配置されています。

JavaScriptを：

するvar C =のdocument.getElementById（ "myCanvas"）;
するvar CTX = c.getContext（ "2D"）;
するvar IMG =のdocument.getElementById（ "悲鳴"）;
ctx.drawImage（IMG、90,130,50,60,10,10,50,60）。

»をお試しください

例

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

キャンバス：

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

するvar V =のdocument.getElementById（ "ビデオ1"）;
するvar C =のdocument.getElementById（ "myCanvas"）;
CTX = c.getContext（ '2D'）;
v.addEventListener（ '遊び'、関数（）{varはI = window.setInterval（関数（）{ctx.drawImage（V、5,5,260,125）}、20）;}、false）を。
v.addEventListener（ 'ポーズ'、関数（）{window.clearInterval（ⅰ）;}、false）を。
v.addEventListener（ '終了'、関数（）{てclearInterval（ⅰ）;}、false）を。

»をお試しください

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

前：HTMLキャンバスのmeasureText（）メソッド

次へ：HTMLキャンバスのImageData width属性

HTML ラベル

HTML ラベル

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

画像を使用するには：

例

ブラウザのサポート

定義と使用法

JavaScriptシンタックス

パラメータ値

より多くの例

例

例

例