HTML canvas putImageData() 方法
实例
下面的代码用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.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定义和用法
putImageData() 方法将图像数据（来自指定的 ImageData 对象）放回画布上。
提示:了解 getImageData() 方法，该方法复制画布上指定矩形的像素数据。
提示: 了解创建新的空白 ImageData 对象的 createImageData() 方法。
JavaScript 语法
| JavaScript 语法: | context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight); |
|---|
参数值
| 参数 | 描述 |
|---|---|
| imgData | 指定要放回画布上的 ImageData 对象 |
| x | 在画布上放置图像的左上角的 x 坐标（以像素为单位） |
| y | 在画布上放置图像的左上角的 y 坐标（以像素为单位） |
| dirtyX | 可选。开始绘制图像的左上角的 x 坐标（以像素为单位）。 默认 0 |
| dirtyY | 可选。开始绘制图像的左上角的 y 坐标（以像素为单位）。 默认 0 |
| dirtyWidth | 可选。在画布上绘制图像时使用的宽度。 默认值:提取图像的宽度 |
| dirtyHeight | 可选。在画布上绘制图像时使用的高度。 默认值:提取图像的高度 |
❮ Canvas 对象
