javascript - Android native 浏览器中 Canvas 上的重复行

Question

我正在 Canvas 元素中的触摸移动处理程序上绘制线条。代码如下，

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();
}

图层是一个 Canvas 元素。 x1 和 y1 值取自触摸启动处理程序。

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

有人可以建议解决重复画线问题吗？

Answer 1

删除layerContext.closePath(); – 因为这会添加一条线回到起点。我想 iOS 只是将它们渲染在彼此之上，所以你看不到它。 Android 将它们相互展示。