例
下面复制码与所述画布上的指定矩形的像素数据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 | 可选的。 高度用来在画布上绘制图像 |
<画布对象