HTML5 Canvas Ghosting Issue

Question

사용자가 커서를 화면 위로 드래그하면 정사각형 캔버스가 그려집니다. 내 문제는 캔버스가 "고스트 (ghosting)"하다는 것입니다. redraw() 또는 clearrect()를 사용하여이 문제를 해결할 수 있다고 생각하지만이 경우 해당 함수를 구현하는 방법을 잘 모르겠습니다. 감사.

drawSquare = true; 
//DRAG TO CREATE RECTANGLE 

if(drawSquare == true){ 
    $(document).mousedown(function(e) { 
     dragShape = true; 
     posYdown = e.pageY; 
     posXdown = e.pageX; 
    }); 
     $(document).mousemove(function(e) { 
      if(dragShape == true) { 
       var c=document.getElementById("canvas1"); 
       var ctx=c.getContext("2d"); 
       ctx.fillStyle = "black"; 
       ctx.fillRect(posXdown ,posYdown ,e.pageX - posXdown ,e.pageY - posYdown);   
      } 
     }); 
      $(document).mouseup(function() { 
       dragShape = false; 
      }); 
} 

Answer 1

예, 이전에 그려진 픽셀을 삭제하려면 context.clearRect이 필요합니다. 그렇지 않으면 유령 잔해가 생깁니다.

여기에 코드의 리팩토링 버전입니다 :

힌트 : 새로운 사각형을 그리기 전에

• 지우기 캔버스.
• 앱 시작 부분에서 한 번만 캔버스와 컨텍스트에 대한 참조를 가져옵니다.
• 마우스 위치를 캔버스의 오프셋 X, Y로 조정합니다 (나중에 페이지에서 캔버스의 위치를 ​​조정할 경우를 대비하여).

귀하의 학습에 대한 행운을 빕니다!

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
var $canvas=$("#canvas"); 
 
var canvasOffset=$canvas.offset(); 
 
var offsetX=canvasOffset.left; 
 
var offsetY=canvasOffset.top; 
 

 
var dragShape=false; 
 
var posXdown,posYdown; 
 

 

 

 
function handleMouseDown(e){ 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    posXdown=parseInt(e.clientX-offsetX); 
 
    posYdown=parseInt(e.clientY-offsetY); 
 

 
    dragShape = true; 
 
} 
 

 
function handleMouseUp(e){ 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    dragShape = false; 
 
} 
 

 
function handleMouseMove(e){ 
 
    if(!dragShape){return;} 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    var mouseX=parseInt(e.clientX-offsetX); 
 
    var mouseY=parseInt(e.clientY-offsetY); 
 

 
    var width=mouseX-posXdown; 
 
    var height=mouseY-posYdown; 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 
    ctx.fillRect(posXdown,posYdown,width,height);   
 

 
} 
 

 
$("#canvas").mousedown(function(e){handleMouseDown(e);}); 
 
$("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 
$("#canvas").mouseup(function(e){handleMouseUp(e);}); 
 
$("#canvas").mouseout(function(e){handleMouseUp(e);});

body{ background-color: ivory; } 
 
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<canvas id="canvas" width=300 height=300></canvas>