1

我在 Android 4.1.2(Samsung 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 版本有这种行为,以及是否有人有一些巧妙的想法来规避这个错误。

4

0 回答 0