HTML5 Canvas Ghosting Issue

Question

Когда пользователь перетаскивает курсор по экрану, нарисован квадратный холст. Моя проблема заключается в том, что холст является «ореолом». Я думаю, что эту проблему можно решить, используя 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>