例
下面複製碼與所述畫布上的指定矩形的像素數據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 | 9 | 3.6 | 4 | 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 | 可選的。 高度用來在畫布上繪製圖像 |
<畫布對象