移动设备上设置Alpha通道时，HTML5画布像素处理问题

Question

我正在尝试进行一些原始像素操作，但在设置 alpha 通道时，在我的 Android 设备上看到了一些非常不一致的结果。这里是我看到的一些例子：

<canvas id='canvas' width='128' height='128'></canvas>

var ctx = $("#canvas")[0].getContext('2d');
var image = ctx.getImageData(0, 0, 128, 128);

var idx = 0;
for (var y=0; y < 128; ++y) {
    for (var x=0; x < 128; ++x) {
        image.data[idx+0] = 128;
        image.data[idx+1] = 128;
        image.data[idx+2] = 128;
        image.data[idx+3] = (x+y);
        idx += 4;
    }
}

ctx.putImageData(image, 0, 0);

代码也可以在这里获得：http://jsfiddle.net/U3rwY/

以上代码的意图是创建一个从0到255逐渐增加阿尔法值的实心灰色正方形，因此我们应该看到一个从背景颜色到底部角落灰色渐变的正方形。在任何现代桌面浏览器上，我们确实可以看到这一点：

但在安卓设备上我们看到的是这个：

看起来它期望的是一个预先计算好的颜色，而不是我提供的128,128,128。这是正确的吗？如果是，有可靠的方法来检测哪些浏览器需要哪组值吗？

- hexist

Answer 1

可能您的问题源自于安卓默认浏览器中的一个bug：当它绘制一个像素时，如果该像素包含一个alpha值不为0或255，它会改变该像素的颜色。您并不是唯一遇到这个问题的人：https://code.google.com/p/android/issues/detail?id=17565 我猜想将唯一的解决方法就是报告这个bug。另外，看起来这个bug在安卓4.1中被部分修复了（而在4.0版本中仍然存在）。

- Cliclix

Answer 2

在安卓浏览器上存在这个问题。Safari 6.0和Opera Mobile可以正常工作，但是Opera Mini和Firefox Mobile不能。http://www.html5rocks.com/en/tutorials/canvas/hidpi/

你可以在这里了解原因。

- Ashisha Nautiyal

---

所以你发布的链接似乎在谈论缩放问题，这与我在这里看到的问题有些不同。我看到的是这两个图像应该是相同的，但其中一个是一半黑色的，因为我在设置 alpha 通道时正在做一些安卓浏览器认为错误的事情。 - hexist