캔버스에서 그릴 때의 오프셋

간단한 그리기 응용 프로그램이 있습니다. 문제는 좌표 (redraw 함수)에 있습니다. 마우스가되어야하지만 2x 마우스 근처에 있습니다. 코드의 문제점은 무엇입니까?캔버스에서 그릴 때의 오프셋

<html> 
<head> 
    <style type="text/css" media="screen"> 
body{ 
    background-color: green; 
} 

#workspace{ 
    width: 700px; 
    height:420px; 
    margin: 40px auto 20px auto; 
    border: black dashed 1px; 
} 

#canvas{ 
    background: white; 
    width: 100%; 
    height: 100%; 
} 
    </style> 
<script type="text/javascript" src="jquery-1.7.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(
    function() { 
     var context = document.getElementById('canvas').getContext("2d"); 
     var clickX = new Array(); 
     var clickY = new Array(); 
     var clickDrag = new Array(); 
     var paint; 

     $('#canvas').mousedown(function(e){ 
      var mouseX = e.pageX - this.offsetLeft; 
      var mouseY = e.pageY - this.offsetTop; 
      paint = true; 
      addClick(mouseX,mouseY, false); 
      redraw(); 
     }); 

     $('#canvas').mousemove(function(e){ 
      if(paint){ 
       addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true); 
       redraw(); 
      } 
     }); 

     $('#canvas').mouseup(function(e){ 
      paint = false; 
     }); 

     $('#canvas').mouseleave(function(e){ 
      paint = false; 
     }); 

     function addClick(x, y, dragging) 
     { 
      clickX.push(x); 
      clickY.push(y); 
      clickDrag.push(dragging); 
     } 

     function redraw(){ 
      canvas.width = canvas.width; // Clears the canvas 

      context.strokeStyle = "#df4b26"; 
      context.lineJoin = "round"; 
      context.lineWidth = 5; 

      for(var i=1; i < clickX.length; i++) 
      { 
       context.beginPath(); 
       if(clickDrag[i] && i){ 
        context.moveTo(clickX[i-1], clickY[i-1]); 
       }else{ 
        context.moveTo(clickX[i], clickY[i]); 
       } 
       context.lineTo(clickX[i], clickY[i]); 
       context.closePath(); 
       context.stroke(); 
      } 

      console.log(clickX[clickX.length-1]+" "+clickY[clickX.length-1]); 
     } 
    }); 
</script> 
</head> 
<body> 
<div id="workspace"> 
<canvas id="canvas"/> 
</div> 
</body> 
</html>

출처

2012-01-01 tiktak

CSS를 통해 캔버스의 너비/높이를 설정하면 안됩니다. 해상도가 높아지는 대신 캔버스가 늘어납니다. 즉, 좌표가 맞지만 시각적으로 다른 곳으로 끝납니다.

는 예를 들어, X는 X는 시각적 200 좌표 연신 될 것이다 100 좌표 (또는 다른 것]이 연신되어 이후 적어도 그것보다 큰 100 될 것이다). 대신

, 사용 :

<canvas id="canvas" width="700" height="420" />

제거 CSS의 width: 100%.

http://jsfiddle.net/euXJC/1/

출처

2012-01-01 15:23:30 pimvdb

캔버스에서 그릴 때의 오프셋

답변

관련 문제