在畫布上繪制多個矩形而不清除背面圖像

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();
    })
}