Question

我发现这个问题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参数？如果没有帆布方式，我想知道，怎么能用另一种方式解决？我需要改变图像颜色dinamically，我需要这个在Android上工作（我使用phonegap，结果与默认的android浏览器相同）。谢谢！

Answer 1

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

检查＆＃39;打火机＆＃39;并且“更黑”＆＃39; OPS。

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

希望它有所帮助。

如何在没有putImageData（）的情况下在HTML5画布上绘图？

1 个答案: