canvas标签putImageData() 方法将图像数据（ImageData 对象）放回画布上。
输出ImageData像素对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输出ImageData像素对象-HTML教程www.xuandaima.com</title>
</head>
<body>
<canvas id="myCanvas" width="350" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="blue";
ctx.fillRect(10,10,60,60);
function copy()
{
var imgData=ctx.getImageData(10,10,60,60);
ctx.putImageData(imgData,10,80);
}
</script>
<button onclick="copy()">复制</button>
</body>
</html>| document.getElementById("myCanvas2") | 返回文档id属性为"myCanvas2"的对象 |
| getContext("2d") | getContext() 返回画布上绘图的环境。getContext("2d") 返回绘制类型（2 维）的环境，未来可能会支持3维，但现在支持2维。 |
ctx.fillStyle="blue" | 填充绘画样式设置为蓝色 |
| ctx.fillRect(10,10,60,60) | 以矩形填充，绘制X坐标为10，Y坐标为10，矩形宽为60像素，矩形高为60像素。 |
| function copy() | 用于按钮按下时调用该函数 |
| var imgData=ctx.getImageData(10,10,60,60) | 得到ctx对象坐标为10，Y坐标为10，矩形宽为60，矩形高为60的数据赋值给imgData变量，详情请阅读getImageData()，它可复制画布上指定的矩形的像素数据 |
| ctx.putImageData(imgData,10,80) | 将数据从已有的 ImageData 对象绘制到(10,80)位图的方法。 |
| 参数 | 描述 |
|---|---|
| imageData | Uint8ClampedArray的实例，描述了一个一维数组，Uint8ClampedArray的length = 4*width*height。以0填充整个像素矩阵。如果不给定数组，会创建一个“完全透明”(因为透明度值为0)的黑色矩形图像。包含以 RGBA 顺序的数据（可参考RGBA写法），数据使用 0 至 255（包含）的整数表示（可阅读data属性） |
| height | 无符号长整型（unsigned long），返回在图像数据对象中的行的数量。（可阅读height属性） |
| width | 无符号长整型（unsigned long），返回在图像数据对象中每一行像素的数量。（可阅读width属性） |
注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
1. 将数据从已有的 ImageData 对象绘制到位图：
context.putImageData(imagedata, dx, dy);
2. 将数据从已有部分的 ImageData 对象绘制到位图
context.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
输出ImageData像素对象部分数据
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="blue";
ctx.fillRect(10,10,60,60);
function copy()
{
var imgData=ctx.getImageData(10,10,60,60);
ctx.putImageData(imgData,10,80,10,10,20,20);
}| document.getElementById("myCanvas2") | 返回文档id属性为"myCanvas2"的对象 |
| getContext("2d") | getContext() 返回画布上绘图的环境。getContext("2d") 返回绘制类型（2 维）的环境，未来可能会支持3维，但现在支持2维。 |
ctx.fillStyle="blue" | 填充绘画样式设置为蓝色 |
| ctx.fillRect(10,10,60,60) | 以矩形填充，绘制X坐标为10，Y坐标为10，矩形宽为60像素，矩形高为60像素。 |
| function copy() | 用于按钮按下时调用该函数 |
| var imgData=ctx.getImageData(10,10,60,60) | 得到ctx对象坐标为10，Y坐标为10，矩形宽为60，矩形高为60的数据赋值给imgData变量，详情请阅读getImageData()，它可复制画布上指定的矩形的像素数据（可阅读getImageData方法） |
| ctx.putImageData(imgData,10,80,10,10,20,20) | 将数据从已有的 ImageData 对象绘制到(10,80)位图，源图像X轴为10，Y轴为10，高为20，宽为20。 |
| 参数 | 描述 |
|---|---|
| imgData | 规定要放回画布的 ImageData 对象。 |
| dx | 源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量） |
| dy | 源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量） |
| dirtyX | 在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（x 坐标） |
| dirtyY | 在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标 |
| dirtyWidth | 在源图像数据中，矩形区域的宽度。默认是图像数据的宽度 |
| dirtyHeight | 在源图像数据中，矩形区域的高度。默认是图像数据的高度 |
