canvas 图片反色

代码实例：

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title>图片反色</title><style type="text/css">body{ background:black;}#c1{ background:white;}</style><script type="text/javascript">window.οnlοad=function(){var oC=document.getElementById('c1');var oGC=oC.getContext('2d');var oImg=new Image();oImg.οnlοad=function()//图片预加载后才可以操作{draw(this);}oImg.src='1.PNG';function draw(obj){oC.width=obj.width;//将画布设为图片宽的一倍oC.height=obj.height*2;//将画布设为图片高的两倍，以用来倒影oGC.drawImage(obj,0,0);//将图片画在画布上var newImg=oGC.getImageData(0,0,obj.width,obj.height);//得到图片数据var ONewImg = oGC.createImageData(obj.width,obj.height);//重要。要创建新的图片数据再将原来的反色后色数据赋值，// 如果直接在原数据上操作数据会导致数据覆盖而得不到结果for(var i=0;i<newImg.height;i++){for(var j=0;j<newImg.width;j++){var color = getXY(newImg,j,i);//得到原来图片数据，一个像素有四个值，分别代表rgbavar result = [];result[0] = 255 - color[0];result[1] = 255 - color[1];result[2] = 255 - color[2];result[3] = 255*i/newImg.height;setXY(ONewImg,j,newImg.height-i,result);//设置到新的数据里面}}oGC.putImageData(ONewImg,0,obj.height);//将图片数据设置到画布中}//获取rgbafunction getXY(obj,x,y){var w=obj.width;var h=obj.height;var data=obj.data;var color=[];color.push(data[(y*w+x)*4]);color.push(data[(y*w+x)*4+1]);color.push(data[(y*w+x)*4+2]);color.push(data[(y*w+x)*4+3]);return color;}//设置rgbafunction setXY(obj,x,y,color){var w=obj.width;var h=obj.height;var data=obj.data;data[(y*w+x)*4]=color[0];data[(y*w+x)*4+1]=color[1];data[(y*w+x)*4+2]=color[2];data[(y*w+x)*4+3]=color[3];}}</script>
</head><body>
<canvas id="c1" width="500" height="500"></canvas>
</body>
</html>

　　图片：