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瀏覽器