HTMLキャンバスputImageData()メソッド

HTML5 Canvas 参考手册

定義と用法

putImageData() メソッドは、指定されたImageDataオブジェクトからの画像データをキャンバスに戻します。

ヒント：参照 getImageData() メソッドは、キャンバス上の指定された矩形のピクセルデータをコピーします。

ヒント：参照 createImageData() メソッドは、新しい空白のImageDataオブジェクトを作成します。

例

以下のコードは、getImageData()を使ってキャンバス上の指定された矩形のピクセルデータをコピーし、putImageData()を使って画像データをキャンバスに戻します：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

自分で試してみてください

文法

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

パラメータ値

パラメータ 説明
imgData キャンバスに戻す ImageData オブジェクトを指定します。
x ImageData オブジェクトの左上角の x 座標，ピクセル単位。
y ImageData オブジェクトの左上角の y 座標，ピクセル単位。
dirtyX オプション。水平値（x），ピクセル単位でキャンバス上に画像を配置する位置。
dirtyY オプション。水平値（y），ピクセル単位でキャンバス上に画像を配置する位置。
dirtyWidth オプション。キャンバス上に描画するための幅。
dirtyHeight オプション。キャンバス上に描画するための高さ。

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注記：Internet Explorer 8 およびそれ以前のバージョンでは <canvas> 元素がサポートされていません。

HTML5 Canvas 参考手册