現在好多場景都需要改變圖片顏色了，比如天氣圖標，服裝換色等，現在有了canvas一切都不是問題了。。。 原理就是通過改變圖片的RGBA顏色 ~~~ ctx.getImageData(x,y,width,height); ~~~ ~~~ ctx.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight); ~~~ 代碼如下： ~~~ var canvas = document.createElement('canvas'); canvas.width = 200; canvas.height = 200; document.body.appendChild(canvas); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#ddd'; ctx.fillRect(0, 0, canvas.width, canvas.height); var img = new Image(); img.src = 'images/1.png'; img.onload = function() { ctx.drawImage(img, 0, 0, img.width, img.height); var imageData = ctx.getImageData(0, 0, img.width, img.height); for(var i=0, len=imageData.data.length; i<len; i+=4) { imageData.data[i] = 255; imageData.data[i+1] = 0; imageData.data[i+2] = 0; imageData.data[i+3] = 100; } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.putImageData(imageData, 0, 0); } ~~~ 原圖：  改變后：  反色效果： ~~~ var canvas = document.createElement('canvas'); canvas.width = 200; canvas.height = 200; document.body.appendChild(canvas); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#ddd'; ctx.fillRect(0, 0, canvas.width, canvas.height); var img = new Image(); img.src = 'images/1.png'; img.onload = function() { ctx.drawImage(img, 0, 0, img.width, img.height); var imageData = ctx.getImageData(0, 0, img.width, img.height); for(var i=0, len=imageData.data.length; i<len; i+=4) { imageData.data[i] = 255 - imageData.data[i]; imageData.data[i+1] = 255 - imageData.data[i+1]; imageData.data[i+2] = 255 - imageData.data[i+2]; } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.putImageData(imageData, 0, 0); } ~~~