getImageData：获取一张图片的像素数据cxt.getImageData(x,y,width,height)x:其中图片所在的x坐标y：图片的y坐标width,height要获取的像素区域返回值是一个对象，对象包含一个数据属性，width,height。data属性是一个巨大的数组，数组中存放的是图像，每组四个像素的所有像素信息构成一个像素信息，如：[r1,g1,b1,a1,r2,g2,b2,a2...],r(red)g(green)b(Blue)a(transparency)putImageData:输出像素图像putImageData(pixelobject,x,y)注意：getImageData会造成跨域问题，所以你的程序要放在下面Web服务器，我把它放在phpstudy下。如果对学习web前端感兴趣的朋友可以来我的web前端学习君阳5753，08719可以免费领取一份优质的web前端学习教程！我的图片大小是200x200。1：倒色效果算法：就是把每个像素点的r,g,b颜色倒过来，即（255-原始值）??2.黑白效果（灰度图）到将彩色图片转成黑白图片，原理：求r(data[i]),g(data[i+1]),b(data[i+2]),三个通道的平均值然后averageValue赋值给r,g,b也可以赋给rgb的灰度3.调整亮度强度r,g,b通道加正值变亮，加负值变暗：data[i]-=30;数据[i+1]-=50;数据[i+2]-=50;4、复古效果按比例混合添加r、g、b。5、蓝色蒙版蓝色蒙版是让图片变成蓝色，将蓝色通道赋值为r、g、b三基色的平均值，将绿色和红色通道设置为0。其他蒙版效果，只需设置对应通道的平均值，其他通道关闭即可。6.透明度这个很简单，只需要将透明度乘以0到1之间的一个值即可。同css的opacity七、createImageData：根据图片或者一定的宽高创建像素区域cxt.createImageData(w,h)cxt.createImageData(imgData)w,h:创建区域的宽高imgData：创建的区域与本像素区域的宽高相同，imgData为getImageData获取的图像像素的返回值1，根据一张图像的宽高，创建一个透明的红色像素区域2，自定义一个200x200蓝色透明像素区域
