javascript - Phonegap HTML5 Canvas 层未清除(仅在设备上)

Question

为 Android (Galaxy S4 4.3) 编写一个 Phonegap (3.4) 应用程序。 应用程序有: 背景(zIndex = 0) 图层(zIndex = 1)

背景永远不会改变。 该层可通过触摸或鼠标按下滚动，因为它显示来自另一个阴影 Canvas (高度大于屏幕)的图像。

“刷新”层 Canvas (contextInChat) 的代码，导致用户滚动:

contextInChat.clearRect(0, 0, canvasInChat.width, canvasInChat.height);
contextInChat.drawImage(canvasNewChat, 0, chats.getCurrentChat().getYPosition(), windowWidth, chat_screen_height, 0, 0, canvasInChat.width, canvasInChat.height);

这在我使用 Firefox 的 PC 浏览器中工作正常(一个可移动的矩形):

但是当在设备上测试时，它确实会滚动，但问题是它不清楚图层在开始移动之前的状态(向上移动，底部矩形在开始移动之前就在那里，但上部矩形rect 正在移动“ok”，底部 rect 应该已经用上面的 clearRect() 清除了:

Answer 1

我认为这是一个错误，而且是一个令人沮丧的错误。其中一些页面可能有助于解决您的问题(尽管我在 Nexus 7 和 4.3 上始终无法消除它):

• > https://medium.com/p/ffcb939af758
• > https://code.google.com/p/android/issues/detail?id=35474
• > HTML5 canvas issues on Android 4.1.1
• > Android 4+ html5 canvas not redrawing
• > Phone Android HTML5 Hardware Acceleration - Canvas

您可能需要考虑 Project Crosswalk ( https://crosswalk-project.org )，它本质上使用带有加速 Canvas 的 Chrome webview 来绕过系统网络浏览器(包括 4.4，它不会加速 Canvas )中对 Canvas 的糟糕支持。 ..叹气)。