0

在组装一个小型画布应用程序时，我偶然发现了一种奇怪的行为，这种行为似乎只发生在 Android 的默认浏览器中。

当绘制到globalCompositeOperation设置'destination-out'为充当“橡皮擦”工具的画布时，Android 浏览器有时会按预期运行，有时根本不会更新画布中的像素。

设置：

context.clearRect(0,0, canvas.width, canvas.height);
context.drawImage(img, 0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = 'destination-out';

画一个圆圈来擦除画布上的像素：

context.fillStyle = '#FFFFFF';
context.beginPath();
context.arc(x,y,25,0,TWO_PI,true);
context.fill();
context.closePath();

可以在这里看到一个小演示来说明这个问题：http: //gumbojuice.com/files/source-out/ 和 javascript 在这里： http: //gumbojuice.com/files/source-out/js/main。 js

这已经在多个桌面和移动浏览器中进行了测试，并且表现符合预期。在刷新页面后在Android本机浏览器上有时它可以工作，有时什么也没有发生。

我见过其他将画布移动一个像素以强制重绘的黑客，但这不是一个理想的解决方案。

谢谢大家。

4

1 回答 1

0

我做了这样的事情，这迫使画布脱离：

ctx.clearRect(0, 0, canvas.width, canvas.height);

if (isStockAndroid) {
    canvas.style.display = "none";
    canvas.offsetHeight;
    canvas.style.display = "block";
}

就FPS而言，这似乎是最有效的。否则它不是那么好：

canvas.width = canvas.width;

...这似乎也让这一切对我来说都正常工作。不过，尚未测试第一个是否与第二个基本相同并重置画布设置，但它似乎获得了更高的帧速率？无论如何，这绝对可以解决问题。对于本机检测的东西，试试这里：如何仅检测本机 Android 浏览器

于 2014-02-21T11:07:00.883 回答