캔버스 마우스 포인터가 동기화되지 않았습니다.

캔버스 터치 이벤트 기능을 배우고 있습니다. 상자 안의 선을 그려야하지만, 마우스 포인터와 동기화되지 않은 그림은 내 코드를 확인하고 내가 가진 실수를 지적합니다. 했다. 고맙습니다!캔버스 마우스 포인터가 동기화되지 않았습니다.

는 여기에 오프셋을 사용하려고 코멘트에서 제안으로 코딩

<!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)

크롬이있는 경우 개발자 탭> 설정 -> 재정의 -> 터치 이벤트 사용으로 이동하여 위의 데모 바이올린에서 터치 이벤트를 테스트합니다.

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 파일을 열 때 Google 크롬을 사용할 때 캔버스 마우스 포인터가 아직 동기화되지 않았습니까? 왜 그런지 알 겠어? 마우스가 왼쪽을 가리킬 때만 선을 그릴 수 있습니다. – user2913749

데모를 보았습니까? – loxxy

예. 코드를 HTML 파일로 저장하고 크롬으로 열지 만 전체 화면 크기로 표시됩니다. 마우스 포인터가 아직 동기화되지 않았습니다. 감사합니다. – user2913749

캔버스 마우스 포인터가 동기화되지 않았습니다.

답변

관련 문제