优化后的代码：

window.onload = function() { var drawing = document.getElementById("drawing"), imgInput = document.images[0], context, imageData,data,i,len, red, green, blue, alpha, average; //检查兼容性 if (drawing.getContext) { context = drawing.getContext("2d"); //绘制原始图像 context.drawImage(imgInput, 0, 0); //取得图像数据 imageData = context.getImageData(0, 0, imgInput.width, imgInput.height); data = imageData.data; for (i = 0, len = data.length; i < len; i += 4) { //i应该是0,4,8... red = data[i]; //0,4,8... green = data[i + 1]; //1,5,9... blue = data[i + 2]; //2,6,10... alpha = data[i + 3]; //3,7,11 //求得rgb平均值 average = Math.floor((red + green + blue) / 3); //设置颜色值，透明度不变 data[i] = average; data[i + 1] = average; data[i + 2] = average; } //回写数据并显示结果 imageData.data = data; context.putImageData(imageData, 0, 0); } };

或者让图片颜色反转：

window.onload = function() { var drawing = document.getElementById("drawing"); var imgInput = document.images[0]; //检查兼容性 if (drawing.getContext) { var context = drawing.getContext("2d"); //绘制原始图像 context.drawImage(imgInput, 0, 0); //取得图像数据 var imageData = context.getImageData(0, 0, imgInput.width, imgInput.height); var data = imageData.data; var i, len, red, green, blue, alpha; for (i = 0, len = data.length; i < len; i += 4) { red = data[i]; green = data[i + 1]; blue = data[i + 2]; alpha = data[i + 3]; //反转颜色 data[i] = 255 - data[i]; data[i + 1] = 255 - data[i + 1]; data[i + 2] = 255 - data[i + 2]; } imageData.data = data; context.putImageData(imageData, 0, 0); } }; 合成

另外还有属性：

globalAlpha；

globalCompositionOperation；

其中第一个属性是一个介于0-1之间的值，用来指定所有绘制的透明度，这样就可以先指定透明度，再画图，然后再重置透明度，如：

window.onload = function() { var drawing = document.getElementById("drawing"); var imgInput = document.images[0]; //检查兼容性 if (drawing.getContext) { var context = drawing.getContext("2d"); //绘制原始图像 context.drawImage(imgInput, 0, 0); context.globalAlpha = 0.5; //半透明效果 context.drawImage(imgInput, 50, 50); context.globalAlpha = 1; //不透明效果 context.drawImage(imgInput, 100, 100); } };

另外第二个属性则表示后绘制的图形怎样与先绘制的图形结合：

如将第二个图片放在第一个图片下方：

window.onload = function() { var drawing = document.getElementById("drawing"); var imgInput = document.images[0]; //检查兼容性 if (drawing.getContext) { var context = drawing.getContext("2d"); //绘制原始图像 context.fillStyle = "red"; context.fillRect(150, 20, 75, 50); context.globalCompositeOperation = "destination-over"; context.fillStyle = "blue"; context.fillRect(180, 50, 75, 50); } };