我在画布元素中的触摸移动处理程序上画线。代码如下
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();
}
图层是画布元素。 x1和y1值取自触摸启动处理程序。
问题是,触摸移动时在android本机浏览器中出现重复行。但是相同的代码在IOS中也可以正常工作。
任何人都可以建议解决重复的线条绘制问题吗?
最佳答案
删除layerContext.closePath();
–因为这会将一条线添加回起点。我想iOS只是将它们呈现在彼此的顶部,所以您看不到它。 Android会彼此展示它们。
关于javascript - Android native 浏览器中 Canvas 上的重复行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20000985/