在画布上绘制多个矩形而不清除背面图像

Question

我正在尝试在画布上绘制多个矩形。 除了鼠标移动时不清除矩形，我能够做到这一点。 当我尝试使用clearRect清除矩形时，画布上的背面图像也会被清除。 所以我已经注释掉//ctx.clearRect(0, 0, canvas.width, canvas.height); 在下面的代码中

我已经看过几个SO类似问题的帖子 ，但似乎没有用

 $(function(){ var canvas = document.getElementById('myCanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillText("Sample String", 20, 50); } var ctx = canvas.getContext('2d'); //Variables var canvasx = $(canvas).offset().left; var canvasy = $(canvas).offset().top; var last_mousex = last_mousey = 0; var mousex = mousey = 0; var mousedown = false; //Mousedown $(canvas).on('mousedown', function (e) { last_mousex = parseInt(e.clientX - canvasx); last_mousey = parseInt(e.clientY - canvasy); mousedown = true; }); //Mouseup $(canvas).on('mouseup', function (e) { mousedown = false; }); //Mousemove $(canvas).on('mousemove', function (e) { mousex = parseInt(e.clientX - canvasx); mousey = parseInt(e.clientY - canvasy); if (mousedown) { //ctx.clearRect(0, 0, canvas.width, canvas.height); var width = mousex - last_mousex; var height = mousey - last_mousey; ctx.beginPath(); ctx.rect(last_mousex, last_mousey, width, height); ctx.strokeStyle = 'black'; ctx.lineWidth = 1; ctx.stroke(); } //Output $('#results').html('current: ' + mousex + ', ' + mousey + '<br/>last: ' + last_mousex + ', ' + last_mousey + '<br/>mousedown: ' + mousedown); }); }) 

 canvas { border: 1px solid black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3> Use mouse to draw multiple rectangles with in the canvas </h3> <canvas id="myCanvas"></canvas> <div id="results"> </div> 

Answer 1

您的错误是您清除了所有画布：

ctx.clearRect(0, 0, canvas.width, canvas.height);

而不是只清除您之前绘制的区域：

ctx.clearRect(prev_x-1, prev_y-1, prev_w+2, prev_h+2);

---

我在这里写了基本的想法，但是您需要添加一些代码来清除区域，具体取决于鼠标的方向，然后移动到（尝试将鼠标移到每个角，然后看看会发生什么）。

 $("#clear").click(function(){ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillText("Sample String", 20, 50); }); $(function(){ var canvas = document.getElementById('myCanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillText("Sample String", 20, 50); } var ctx = canvas.getContext('2d'); //Variables var canvasx = $(canvas).offset().left; var canvasy = $(canvas).offset().top; var last_mousex = last_mousey = w = h = 0; var prev_x = prev_y = prev_w = prev_h = 0; var mousex = mousey = 0; var mousedown = false; //Mousedown $(canvas).on('mousedown', function (e) { last_mousex = parseInt(e.clientX - canvasx); last_mousey = parseInt(e.clientY - canvasy); mousedown = true; }); //Mouseup $(canvas).on('mouseup', function (e) { w = h = 0; mousedown = false; }); //Mousemove $(canvas).on('mousemove', function (e) { mousex = parseInt(e.clientX - canvasx); mousey = parseInt(e.clientY - canvasy); if (mousedown) { prev_x = last_mousex; prev_y = last_mousey; prev_w = w; prev_h = h; ctx.clearRect(prev_x-1, prev_y-1, prev_w+2, prev_h+2); w = mousex - last_mousex; h = mousey - last_mousey; ctx.beginPath(); ctx.rect(last_mousex, last_mousey, w, h); ctx.strokeStyle = 'black'; ctx.lineWidth = 1; ctx.stroke(); } //Output $('#results').html('current: ' + mousex + ', ' + mousey + '<br/>last: ' + last_mousex + ', ' + last_mousey + '<br/>mousedown: ' + mousedown); }); }) 

 canvas { border: 1px solid black; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3> Use mouse to draw multiple rectangles with in the canvas </h3> <button id="clear">clear</button> <br /> <canvas id="myCanvas"></canvas> <div id="results"> </div> 

Answer 2

我认为您可以采用另一种方法

通过仅使用mousedown事件，然后将所有矩形保存到数组变量

然后，您可以使用保存的变量清除并重新绘制整个画布

var shapes = [];
canva.addEventListener('mousedown', mouseDownListener);

class Rectangle() { 
   public ctx, x, y, w, h;

   public Rectangle(ctx, x, y, w, h) {
      this.ctx = ctx;
      this.x = x;
      this.y = y;
      this.w = w;
      this.h = h;
   }
   public draw() {
      // draw using ctx here
   }
}

function mouseDownListener() { 
    // create rectable
    var rectangle = new Rectangle(ctx, x, y, width, height);
    // save rectangle to an array
    shapes.push(rectangle);
    // redraw canvas
    redraw();
}

function redraw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    // draw all rectangle
    shapes.forEach(function(shape) {
        // draw shape
        shape.draw();
    })
}