Question

在整理一个小型画布应用程序时，我偶然发现了一种奇怪的行为，这种行为似乎只出现在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;

......这似乎也让我一切顺利。没有测试过看第一个是否与第二个基本相同并重置画布设置，但它似乎获得更高的帧速率？无论如何，这绝对是清除事情。对于原生检测内容，请尝试此处：How to detect only the native Android browser

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

1 个答案: