Android 4.1.2上默认浏览器中的奇怪的画布颜色错误

时间:2013-08-09 10:15:22

标签: javascript android browser html5-canvas

我在Android 4.1.2(三星GT-N8010平板电脑)的默认互联网浏览器中遇到了一个非常奇怪的错误。

我已将生产代码缩减为简单的jsfiddle (http://jsfiddle.net/Lnd3v/),并设法重现该错误。

案例1 创建一个红色透明的棋盘画布并将其绘制在蓝色画布上以生成蓝色和红色棋盘。画布尺寸为400x200。按预期工作。

案例2 创建一个黑白棋盘画布,然后通过每个像素操作将它们更改为透明和红色,最后在蓝色画布上绘制现在红色和透明的画布。与第一种情况相同的画布尺寸。产生与第一种情况相同的最终结果。

案例3 与案例2完全相同,但画布尺寸现在为400x350。 蓝色现在神奇地变成了洋红色!

负责转换黑&的javascript函数白色帆布到透明和颜色(在此测试中为红色)看起来像这样:

var convertGreyscaleToTintedTransparentCanvas = function (canvas, r, g, b) {
    "use strict";

    var ctx, imageData, length, offset, data;

    ctx = canvas.getContext('2d');
    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    data = imageData.data;
    length = data.length;

    for (offset = 0; offset < length; offset += 4) {
        data[offset + 3] = data[offset];
        data[offset] = r;
        data[offset + 1] = g;
        data[offset + 2] = b;
    }

    ctx.putImageData(imageData, 0, 0);
};

如果画布大小从400x200更改为400x350(使案例3中断),则案例1仍可按预期工作。此外,在案例3中,透明和红色画布看起来正确。

之前是否有人遇到过类似的问题?我真的想知道哪些Android版本有这种行为,如果有人有一些聪明的想法如何规避这个bug。

0 个答案:

没有答案