例
キャンバス上の指定された矩形のためのコピー画素データ以下のコード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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
putImageData()メソッドは、画像データを置く(from a specified ImageData object)バックキャンバス。
Tip:についての記事を読むgetImageData()そのキャンバス上の指定された矩形のためにコピーするピクセルデータを方法。
Tip:についての記事を読む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 | 任意。 キャンバス上の画像を描画するために使用する高さ |
<Canvasオブジェクト