Question

我有一个奇怪的问题。当我启用硬件加速时，如果我绘制到画布元素，画布上绘制的任何内容都将重新绘制到页面顶部。

如果我关闭硬件加速，则不会发生此问题。

我只是在Android 4.1.1上亲自测试过，但我之前在我们的一位用户之前注意到这个问题我无法复制（他们至少在Android 3+上）

我无法抓住截图（不太确定如何在Android上执行此操作），但我会尝试分解该过程。

启用硬件加速

用户填写常规详细信息。
用户滚动到页面底部，在画布元素上绘制一个Signature。
如果用户在页面顶部忘记了某些内容并滚动到页面顶部
出现视觉错误，他们绘制的签名显示在页面顶部

但是，如果没有硬件加速，则不会执行步骤4。我应该对HTML5 Canvas做些什么吗？

我不确定我需要传递哪些信息 - 它似乎发生在三星，HTC和谷歌Nexus手机/平板电脑上，所以它是一个一致的错误。

我试着四处寻找，但我总是得到游戏开发线程或类似的东西。

我真的希望启用硬件加速，这是唯一出现的问题 - 性能提升太令人难以置信

Answer 1

Android中重复的HTML5画布问题已经在版本4.1.1中出现，并且尚未在最新的4.2中修复。

解决方案是画布的父HTML元素的 none 将溢出：隐藏或溢出：滚动

Answer 2

好的，所以我想出了HACKIEST解决方案。我的onTouchEnd事件被触发后，我必须执行以下操作

1. Append changes to the canvas. It'll double-draw
2. Create a clone of the canvas
3. remove the canvas, re-add it
4. Copy the data from the clone over

然后这个小虫消失了......嘲笑。

我必须让它工作，在删除硬件加速后我注意到jQM的笨重感觉

Answer 3

我遇到了同样的问题。在我的情况下，似乎是由jquery mobile css引起的。

进入guya添加的更多细节，转到jquery.mobile.structure.css文件并更改此行：

.ui-content {border-width：0;溢出：可见; overflow-x：hidden;填充：15px; }

到

.ui-content {border-width：0;溢出：可见;填充：15px; }

删除overflow-x：hidden属性可以解决问题。

Source: Github / thomasjbradley / signature-pad / Issues

编辑：奇怪的是，我注意到当画布宽度为256px宽度或更小时没有出现问题。

Answer 4

对于任何有兴趣的人来说，Android 5的工作效果都很惊人，画布工作速度要快得多。

Answer 5

我正在使用Segment Display库，它也受此问题的影响。经过与lib的作者的长时间讨论，他出来了一个快速的解决方法。他告诉我要添加这两行：

context.fillStyle = '#fff';
context.fillRect(0, 0, display.width, display.height);

就在这一行之后：

// clear canvas
context.clearRect(0, 0, display.width, display.height);

解决方案经过测试，就像魅力一样。

通过对给定代码的快速分析，我假设透明（clearRect）画布导致了这些问题，并将其更改为非透明的（fillRect）修复了该错误。

Answer 6

我在创建视图时解决了这个问题：

if (Build.VERSION.SDK_INT >= 16) {
  try {
    Method method = root.getClass().getMethod("setLayerType", int.class, Paint.class);
    method.invoke(root, 0x01/* View.LAYER_TYPE_SOFTWARE */, null);
    Log.d(TAG, "hardware accelaration disabled");
  } catch ...
}

手机Android HTML5硬件加速 - 画布

6 个答案: