设置 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/

上述代码的目的是得到一个实心灰色正方形，其 alpha 值从 0 增加到 255，因此我们应该在底角看到一个从背景颜色渐变为灰色的正方形。这正是我们在任何现代桌面浏览器上看到的：

虽然我们在 android 上看到了这个：

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

Answer 1

您的问题可能来自 android 的默认浏览器中的错误，当它绘制一个包含不同于 0 或 255 的 alpha 值的像素时，它会改变其颜色。您不是唯一遇到此问题的人：https://code.google.com/p/android/issues/detail?id=17565

我想解决它的唯一机会是报告错误。此外，该错误似乎已在 android 4.1 中部分修复（而 4.0 仍然存在）。

Answer 2

是的，在 android 浏览器上有这个问题。 safari 6.0 和opera mobile 可以正常工作，但opera mini 和firefox mobile 不行。 http://www.html5rocks.com/en/tutorials/canvas/hidpi/

在这里您可以了解原因。