Android本机浏览器中画布上的重复行答案

【问题标题】：Duplicate line on canvas in Android native browserAndroid本机浏览器中画布上的重复行
【发布时间】：2013-11-28 20:10:31
【问题描述】：

我正在画布元素中的触摸移动处理程序上画线。代码如下，

function touchMoveHandler(ev){
        var layerContext = layer.getContext('2d');
        x2 = ev.originalEvent.touches[0].pageX;
        y2 = ev.originalEvent.touches[0].pageY;

        layerContext.clearRect(0, 0, $(layer).innerWidth(), $(layer).innerHeight());

        layerContext.lineWidth = 20;
        layerContext.strokeStyle = "rgba(255,0,0,0.1)";
        layerContext.lineCap = 'round';

        layerContext.beginPath();
        layerContext.moveTo(x1, y1);
        layerContext.lineTo(x2, y2);
        layerContext.stroke();
        layerContext.closePath();
}

layer 是一个画布元素。 x1 和 y1 值取自触摸启动处理程序。

问题是，在触摸移动时在 android 本机浏览器中出现重复行。但同样的代码在 IOS 中运行良好。

任何人都可以建议解决重复线绘制问题？

【问题讨论】：

这个提示也很有用：slash-system.com/en/how-to-fix-android-html5-canvas-issues

标签： javascript android html html5-canvas android-canvas

【解决方案1】：

删除layerContext.closePath(); - 因为这会在起点添加一条线。我想iOS只是将它们呈现在彼此之上，所以你看不到它。 Android 将它们显示在彼此旁边。

【讨论】：

感谢您的回复。我删除了 layerContext.closePath() 语句，但仍然遇到同样的问题。在 touchMove 上显示重复线。

【解决方案2】：

这是一个Android bug，通常是通过在canvas 元素的祖先之一上设置overflow 来触发的，你的CSS 中有类似的东西吗？

【讨论】：

谢谢罗伯特。是的，我在 CSS 中为我的画布元素设置了溢出：隐藏样式。