HTML canvas putImageData() 方法

Canvas 對象

下面的代碼通過 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);

}

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支援 putImageData() 方法。

<b>注意：</b>Internet Explorer 8 及之前的版本不支援 &lt;canvas&gt; 元素。

putImageData() 方法将圖像資料（從指定的 ImageData 對象）放回畫布上。

提示：請參閱 getImageData() 方法，它可複制畫布上指定的矩形的像素資料。

提示：請參閱 createImageData() 方法，它可建立新的空白 ImageData 對象。

JavaScript 文法：

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

參數

描述

imgData

規定要放回畫布的 ImageData 對象。

x

ImageData 對象左上角的 x 坐标，以像素計。

y

ImageData 對象左上角的 y 坐标，以像素計。

dirtyX

可選。水準值（x），以像素計，在畫布上放置圖像的位置。

dirtyY

可選。垂直值（y），以像素計，在畫布上放置圖像的位置。

dirtyWidth

可選。在畫布上繪制圖像所使用的寬度。

dirtyHeight

可選。在畫布上繪制圖像所使用的高度。