canvas 获取、复制画布上指定矩形区域的像素数据getImageData()，绘制像素数据putImageData()

//getImageData() 拷贝矩形区域的像素
返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
var imgData=context.getImageData(x,y,width,height);
参数	描述
x	开始复制的左上角位置的 x 坐标。
y	开始复制的左上角位置的 y 坐标。
width	将要复制的矩形区域的宽度。
height	将要复制的矩形区域的高度。

//putImageData() 将图像数据添加到画布上
方法将图像数据（从指定的 ImageData 对象）放回画布上。
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
参数	描述
x	ImageData 对象左上角的 x 坐标，以像素计。
y	ImageData 对象左上角的 y 坐标，以像素计。
dirtyX	可选。水平值（x），以像素计，在画布上放置图像的位置。
dirtyY	可选。水平值（y），以像素计，在画布上放置图像的位置。
dirtyWidth	可选。在画布上绘制图像所使用的宽度。
dirtyHeight	可选。在画布上绘制图像所使用的高度。

//实例
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.getImageData(20,20,50,50);
ctx.putImageData(imgData,10,10);