在Android本地瀏覽器上畫布上的重複線條

我正在繪製線條觸摸移動處理程序的畫布元素。該代碼是波紋管，在Android本地瀏覽器上畫布上的重複線條

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中工作正常。

任何人都可以建議修復重複的線條繪製問題？

來源

2013-11-15 sureshunivers

另外這技巧可以是有用的：http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/ – lavrton

取出layerContext.closePath(); - 因爲這增加了一行回到起點。我想iOS只是把它們放在彼此之上，所以你看不到它。和Android顯示他們彼此。

來源

2013-11-15 12:31:20

感謝您的回覆。我刪除了layerContext.closePath（）語句，但仍然得到相同的問題。在touchMove重複行顯示。 – sureshunivers

這是一個Android bug，大多數情況下，它是通過在canvas元素的祖先之一上設置overflow來觸發的，在CSS中是否有類似的東西？

來源

2013-11-15 12:55:15 robertc

謝謝robertc。是的，我有溢出：CSS中我的canvas元素的隱藏風格。 – sureshunivers

在Android本地瀏覽器上畫布上的重複線條

回答

相關問題