如何在没有 putImageData() 的情况下在 HTML5 画布上绘图？答案

【问题标题】：How to draw on HTML5 canvas without putImageData()?如何在没有 putImageData() 的情况下在 HTML5 画布上绘图？
【发布时间】：2014-10-11 22:43:37
【问题描述】：

我发现了这个问题https://code.google.com/p/android/issues/detail?id=17565，似乎不会很快得到解决，所以我想知道，如何在不使用 putImageData() 的情况下在画布上绘图？

var imgCanvas = document.createElement("canvas");
var ctx = imgCanvas.getContext("2d");
var imageObj.src = 'img/someImage.png';
imageObj.onload = function(){

ctx.draw(imageObj,0,0);
var imageData = ctx.getImageData(0,0,30,30);
var data = imageData.data;          
for(var i = 0, n = data.length; i < n; i += 4) {                                 
    data[i]+=20;//red   
    data[i+1]-=20;//green
    data[i+2]-=20;//blue
    data[i+3]=0; //alpha, но я не трогаю этого параметра             
}
ctx.putImageData(imageData,0,0);
}

例如，在普通浏览器中，使用上述脚本更改像素 rgba=[100,100,100,200] 的结果应该是 rgba=[120,80,80,200]，但在 android 的 4.2 默认浏览器上，结果不是预期的，是像 rgba=[153,102,102,200] 这样奇怪的东西。无论如何，关键是有一个问题，我想知道，如何在不使用 putImageData() 方法的情况下更改一张图像的 rgba 参数？如果canvas没有办法，我想知道，如何解决这个问题？我需要动态地更改图像颜色，并且我需要它在 android 上工作（我使用的是 phonegap，结果与默认的 android 浏览器中的相同）。谢谢！

【问题讨论】：

标签： javascript android html canvas kineticjs

【解决方案1】：

如果你想通过一个因子改变整个图像的颜色（例如，将 10 加到 r，30 到 g，4 到 b），你可以使用 globalComposite 操作： https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

检查“较浅”和“较暗”操作。

如果你想为每个像素设置不同的颜色/因子，我认为 putImageData 是要走的路......

希望对你有帮助。

【讨论】：