4

我正在尝试进行一些原始像素操作，但是在设置 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。这是正确的，如果是的话，是否有一种可靠的方法来检测哪些浏览器期望哪组值？

4

2 回答 2

2

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

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

于 2013-05-24T03:50:12.083 回答
0

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

在这里你可以了解为什么。

于 2013-02-28T09:38:50.823 回答