我在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原生浏览器中获取重复行。但是相同的代码在IOS中运行良好。
任何人都可以建议修复重复的线条抽奖问题吗?
答案 0 :(得分:0)
删除layerContext.closePath();
- 因为这会在起点上添加一行。我想iOS只是将它们放在一起,所以你看不到它。 Android会将它们彼此显示出来。
答案 1 :(得分:0)
这是Android bug,通常是通过在overflow
元素的一个祖先上设置canvas
来触发,你在CSS中有类似的东西吗?