Canvas putImageData() 方法
示例
使用 getImageData() 複製矩形的畫素資料。然後使用 putImageData() 將影像資料放回 canvas。
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy() {
const imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}
自己動手試一試 »
描述
putImageData() 方法將影像資料（來自指定的 ImageData 物件）放回 canvas。
語法
| context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight) |
引數值
| 引數 | 描述 |
|---|---|
| imgData | 要放在 context 上的 ImageData 物件。 |
| x | 影像的 x 座標（以畫素為單位）。 |
| y | 影像的 y 座標（以畫素為單位）。 |
| dirtyX | 可選。x 座標。預設為：0。 |
| dirtyY | 可選。y 座標。預設為：0。 |
| dirtyWidth | 可選。寬度。預設為：提取影像的寬度。 |
| dirtyHeight | 可選。高度。預設為：提取影像的高度。 |
返回值
| 無 |
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
putImageData() 在所有現代瀏覽器中都受支援。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
