javascript - Android native 浏览器复制 HTML5 Canvas (在 chrome 中很好)

Question

这是一个奇怪的问题，我只在三星 Galaxy Tab 2 和 Galaxy S2 的原生浏览器上遇到过原生浏览器。

这也在其他安卓手机和平板电脑上进行了测试，例如 Nexus 7 和 Galaxy S4，但它们的 native 浏览器是 chrome，所以看起来不错。此问题也不存在于任何 IOS 浏览器、Windows 桌面浏览器或 Mac 桌面浏览器上。

这几乎就像网页在自身之上加载了两次一样!

因为有一个重复的 Canvas 元素，它会像主 Canvas 一样更新。

这里看起来好像它只在横向模式下旋转时发生，但我相信在纵向模式下， Canvas 在顶部完美对齐。

更奇怪的是，您看到的菜单按钮是一个切换按钮，点击打开菜单，点击关闭菜单。在此设备上，当您点击它时，它会立即打开和关闭。静音按钮切换也会发生同样的情况。

我完全不知所措。

我已经完成了一些 javascript 调试，在各处抛出一些警告，创建对 Canvas 的引用等的初始化函数只调用一次。

我已经阅读并听说过硬件加速会导致问题，但我可能找到的解决方案仅与构建 native 应用有关!不是 HTML5 Canvas 网页。

任何对此的见解都将是很棒的! 提前致谢。

--编辑

我还放入了这个测试 alert(document.getElementsByTagName('canvas').length); 以查看 DOM 中是否有 2 个 Canvas ，但它返回 1!

Answer 1

我遇到了同样的问题。在对我的 Canvas 进行更改后，我能够通过运行以下代码来解决此问题:

// If Samsung android browser is detected
if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) {

    // Tweak the canvas opacity, causing it to redraw
    $('canvas').css('opacity', '0.99');

    // Set the canvas opacity back to normal after 5ms
    setTimeout(function() {
        $('canvas').css('opacity', '1');
    }, 5);

}

通过调整不透明度，这会强制 Canvas 重新绘制并删除重复的形状。这是一个愚蠢的修复，但它有效。希望这对某人有所帮助。