帆布鼠標指針未同步

我目前正在學習帆布觸摸事件功能，我想在框中畫線，但繪圖沒有與鼠標指針同步。請幫助檢查我的代碼並指出我的錯誤製作。謝謝！帆布鼠標指針未同步

這裏是編碼

<!DOCTYPE html> 
<html><head> 
<style> 
#contain { 
width: 500px; 
height: 120px; 
top : 15px; 
margin: 0 auto; 
position: relative;  
} 
</style> 
<script> 
     var canvas; 
     var ctx; 
     var lastPt=null; 
     var letsdraw = false; 

    function init() { 
     var touchzone = document.getElementById("layer1"); 
     touchzone.addEventListener("touchmove", draw, false); 
     touchzone.addEventListener("touchend", end, false); 
     ctx = touchzone.getContext("2d"); 
     } 

    function draw(e) { 
     e.preventDefault(); 
     if(lastPt!=null) { 
      ctx.beginPath(); 
      ctx.moveTo(lastPt.x, lastPt.y); 
      ctx.lineTo(e.touches[0].pageX, e.touches[0].pageY); 
      ctx.stroke(); 
     } 
     lastPt = {x:e.touches[0].pageX, y:e.touches[0].pageY}; 
     } 

    function end(e) { 
      var touchzone = document.getElementById("layer1"); 
     e.preventDefault(); 
     // Terminate touch path 
     lastPt=null; 
     } 
    function clear_canvas_width() 
     { 
      var s = document.getElementById ("layer1"); 
      var w = s.width; 
      s.width = 10; 
      s.width = w; 
     } 
    </script>  
</head> 

<body onload="init()"> 

<div id="contain"> 
<canvas id="layer1" width="450" height="440" 
    style="position: absolute; left: 0; top: 0;z-index:0; border: 1px solid #ccc;"></canvas> 
</div> 

    </body> 
</html>

來源

2013-10-25 user2913749

您需要檢查元件偏移 – orhanhenrik

您遇到的錯誤是什麼？請考慮使用http://codereview.stackexchange.com – loxxy

正如意見建議嘗試使用的偏移量。（DEMO）

如果您有Chrome，請轉至開發人員選項卡 - >設置 - >覆蓋 - >啓用觸摸事件以測試上述演示提琴中的觸摸事件。

var canvas; 
    var ctx; 
    var lastPt = null; 
    var letsdraw = false; 
    var offX = 10, offY = 20; 


    function init() { 
     var touchzone = document.getElementById("layer1"); 
     touchzone.addEventListener("touchmove", draw, false); 
     touchzone.addEventListener("touchend", end, false); 
     ctx = touchzone.getContext("2d"); 
    } 

    function draw(e) { 
     e.preventDefault(); 
     if (lastPt != null) { 
      ctx.beginPath(); 
      ctx.moveTo(lastPt.x, lastPt.y); 
      ctx.lineTo(e.touches[0].pageX - offX, 
        e.touches[0].pageY - offY); 
      ctx.stroke(); 
     } 
     lastPt = { 
      x: e.touches[0].pageX - offX, 
      y: e.touches[0].pageY - offY 
     }; 
    } 

    function end(e) { 
     var touchzone = document.getElementById("layer1"); 
     e.preventDefault(); 
     // Terminate touch path 
     lastPt = null; 
    } 

    function clear_canvas_width() { 
     var s = document.getElementById("layer1"); 
     var w = s.width; 
     s.width = 10; 
     s.width = w; 
    }

來源

2013-10-25 07:38:17 loxxy

但是，當我使用谷歌瀏覽器打開HTML文件，畫布鼠標指針仍然沒有同步？我可以知道爲什麼嗎？我只能在鼠標指向左側時畫線。 – user2913749

你看過演示了嗎？ – loxxy

是的。我將代碼保存爲HTML文件，並使用chrome打開，但顯示爲全屏大小。鼠標指針仍未同步。謝謝 – user2913749

帆布鼠標指針未同步

回答

相關問題