例
キャンバス上の指定矩形のコピー画素データを以下のコードgetImageData()その後、バックでキャンバスに画像データを入れputImageData()
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
} »それを自分で試してみてください ブラウザのサポート
表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。
| 方法 | |||||
|---|---|---|---|---|---|
| putImageData() | はい | 9.0 | はい | はい | はい |
定義と使用法
putImageData()メソッドは、バックキャンバスに（指定のImageDataオブジェクトから）の画像データを置きます。
ヒント：についての記事を読むgetImageData()そのキャンバス上の指定した矩形のコピーピクセルデータを方法。
ヒント：についての記事を読むcreateImageData()新しい、空白のImageDataオブジェクトを作成する方法。
JavaScriptの構文
| JavaScriptシンタックス： | context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight ); |
|---|
パラメーター値
| パラメーター | 説明 |
|---|---|
| imgData | キャンバスに戻すためにのImageDataオブジェクトを指定します |
| x | x座標をピクセル単位でのImageDataオブジェクトの左上隅の |
| y | y座標をピクセル単位でのImageDataオブジェクトの左上隅の |
| dirtyX | 任意。 キャンバスに画像を配置するピクセル単位の水平（x）の値は、 |
| dirtyY | 任意。 キャンバスに画像を配置するピクセル単位で垂直（y）の値は、 |
| dirtyWidth | 任意。 キャンバス上の画像を描画するために使用する幅 |
| dirtyHeight | 任意。 キャンバス上の画像を描画するために使用する高さ |