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