Android浏览器中的画布绘制不一致

Question

在组装一个小型canvas应用程序时，我偶然发现了一种奇怪的行为，该行为似乎只发生在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本机浏览器上，有时它可以工作，有时则什么也没有发生。

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

谢谢大家

Answer 1

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

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浏览器