代碼實例：
<!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>
圖片：
效果：
?
?
2017-09-09?? 22:40:39
與內存分配)
