html5-canvas – 设置alpha通道时移动设备上的html5画布像素操作问题

2019年8月4日 206次阅读

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

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

我想解决问题的唯一机会就是报告错误.此外,它似乎部分修复了android 4.1(虽然4.0仍然有它).

点赞