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 参考
