在 Android 浏览器中的 Canvas 上绘画，页面滚动？答案

【问题标题】：Paint on Canvas in Android's browser, page scroll?在 Android 浏览器中的 Canvas 上绘画，页面滚动？
【发布时间】：2011-04-03 18:43:25
【问题描述】：

我正在尝试制作一个画布，客户可以在其中签名。它在 Chrome v6 中运行良好：

但在 Android 1.5 上，浏览器滚动页面而不是绘制任何内容：

我借用Opera's website的代码。我可以禁用滚动或如何使这项工作？

谢谢！

编辑

使用事件touchstart、touchmove 和touchend：

在使用触控笔的 LG GW620R 上：

关于摩托罗拉里程碑：

在三星 Galaxy 上：

编辑 2 使用指甲效果更好

【问题讨论】：

【解决方案1】：

您正在将开发中的尖端 Chrome 版本与基于 Webkit 的并行浏览器的稳定 1.5 年旧版本进行比较...当然，更新的实验性浏览器对新的 HTML5 功能有更好的支持： ) 它在最近的 Android 版本（比如 2.2）中是如何呈现的？ iOS 呢？

Android 版本之间的 HTML5 浏览器支持之间肯定存在不小的差异（更不用说 HTC 在 SenseUI 等中发布的非标准浏览器版本）。查看 Quirksmode 的 WebKit comparison chart。

就视口设置和禁用滚动而言，Android 的 Webkit 侦听大部分与 iPhone Safari 相同的设置，Apple 提供了漂亮的good documentation 设置，您可以使用这些设置进行调整。

您还可能会发现 this quirksmode post 关于移动 Safari 中支持的事件很有帮助。

【讨论】：

【解决方案2】：

@Sirber 可能会有 touchstart 和 touchend 事件，就像在移动 Safari 中一样，也可以看看那个途径。也许如果您调整视口元标记，则不会有任何滚动，仍然不会绘制，但至少不会滚动。

祝你好运，

马修

【讨论】：

我用this.touchstart = function (ev) { tool.mousedown(ev); }、this.touchmove = function (ev) { tool.mousemove(ev); }和this.touchend = function (ev) { tool.mouseup(ev); }修改了示例代码，虽然很慢，但可以！
mobilegeo.wordpress.com/2010/01/05/…
太棒了！就优化而言，您可以尝试忽略一些 touchmove 事件，因为我相信它们必须被大量触发并占用您的脚本。三分之一的人应该这样做。
我们可以将 XY 存储在一个数组中并显示在touchend 中，而不是实时显示它。 CPU 似乎很难跟上

【解决方案3】：

带有 iOS 的 Canvas 确实更好（性能）。 Android 浏览器远远落后（不适用于 opera-mini）。

如果您想查看差异，请尝试使用 http://webdemo.visionobjects.com/ 。我只是对带有 HTML5 画布元素的手写输入法进行二次平滑处理。

用 iPad1 和摩托罗拉 Xoom 测试

【讨论】：