HTML 5帆布似乎重繪刪除的部分

Question

我已在jsfiddle上創建了以下代碼。目標是在點擊後從畫布中移除一個框。實際發生的情況是網格被清除，並完全重新繪製在舊點中的移除框。當所有給定的對象都被刪除後，網格纔會顯示爲空......我很困惑！我究竟做錯了什麼？

jQuery(function(){ 

    GridBox = new GridBox(); 

    GridBox.init(); 

    var canvas = GridBox.canvas; 

    canvas.on('click', GridBox.clickHandler); 

}); 

function GridBox() 
{ 

    this.target  = { x: 0, y: 0 }; 
    this.current  = { x: 0, y: 0 }; 
    this.boxHeight  = 50; 
    this.boxWidth  = 50; 
    this.width   = 500; 
    this.height  = 500; 
    this.context  = null; 
    this.canvas  = null; 

    var self = this, 
     init = false, 
     bw = this.width, 
     bh = this.height, 
     p = 0, 
     cw = bw + (p * 2) + 1, 
     ch = bh + (p * 2) + 1; 

    /** 
    * Array of boxes that are painted on the grid. 
    * Each box has its own x and y coordinates. 
    */ 
    this.boxesOnGrid = [ 
     { x: 2, y: 2 }, 
     { x: 9, y: 2 }, 
     { x: 5, y: 5 } 
    ]; 

    /** 
    * Initiate this object 
    * @constructor 
    */ 
    this.init = function() 
    { 
     if(!init) { 
      var canvas = jQuery('<canvas/>').attr({ width: cw, height: ch }).appendTo('body'); 

      this.canvas  = canvas; 
      this.context = this.canvas.get(0).getContext('2d'); 

      this.createGrid(); 

      init = true; 

     } 
    }; 

    this.clearGrid  = function() 
    { 
     alert('clearing grid'); 
     this.context.clearRect(0, 0, 500, 500); 
    }; 

    /** 
    * Create the grid 
    */ 
    this.createGrid  = function() 
    { 
     for(var x = 0; x <= bw; x += this.boxWidth) { 
      this.context.moveTo(0.5 + x + p, p); 
      this.context.lineTo(0.5 + x + p, bh + p); 
     } 

     for(var x = 0; x <= bh; x += this.boxHeight) { 
      this.context.moveTo(p, 0.5 + x + p); 
      this.context.lineTo(bw + p, 0.5 + x + p); 
     } 

     this.context.strokeStyle = "#aaa"; 
     this.context.stroke(); 

     var boxes = this.boxesOnGrid; 

     this.boxesOnGrid = []; 

     for(key in boxes) { 
      var currentBox = boxes[ key ]; 
      alert('i want to create box ' + currentBox.x + 'x' + currentBox.y); 
      this.createBoxAt(currentBox.x, currentBox.y); 
     } 
    }; 

    /** 
    * Find a suitable path between two boxes 
    */ 
    this.findPath  = function() 
    { 

    }; 

    this.clickHandler = function(event) 
    { 
     var clickOffset  = { 
       x: event.offsetX, 
       y: event.offsetY 
      }, clickedBox = { 
       x: Math.ceil(clickOffset.x/50), 
       y: Math.ceil(clickOffset.y/50) 
      }; 

     for(key in GridBox.boxesOnGrid) { 
      if(GridBox.boxesOnGrid[ key ].x === clickedBox.x && GridBox.boxesOnGrid[ key ].y === clickedBox.y) { 
       GridBox.clearGrid(); 
       GridBox.removeBox(key); 
       GridBox.createGrid(); 
      } 
     } 

    }; 

    /** 
    * Remove a box from the grid by removing it from the boxes array 
    * and re-drawing the grid. 
    */ 
    this.removeBox  = function(key) 
    { 
     alert('removing box ' + key); 
     this.boxesOnGrid.splice(key, 1); 
    }; 

    /** 
    * Create a box at a given coordinate on the grid 
    * @param {int} x 
    * @param {int} y 
    */ 
    this.createBoxAt = function(x, y) 
    { 
     var box = { 
       x: x * this.boxWidth - this.boxWidth, 
       y: y * this.boxHeight - this.boxHeight 
      }; 

     this.createBox(box.x, box.y); 
     this.saveBox(x, y); 
    }; 

    this.createBox = function(xpos, ypos) 
    { 
     this.context.rect(xpos, ypos, this.boxWidth, this.boxHeight); 
     this.context.fillStyle = '#444'; 
     this.context.fill(); 
    }; 

    this.saveBox = function(x, y) 
    { 
     this.boxesOnGrid.push({ x: x, y: y }); 
    }; 
}​ 

Answer 1

Working Fiddle

更改createBox以下內容。

this.createBox = function(xpos, ypos) 
    { 
     this.context.beginPath(); 
     this.context.rect(xpos, ypos, this.boxWidth, this.boxHeight); 
     this.context.fillStyle = '#444'; 
     this.context.fill(); 
     this.context.closePath(); 
    }; 

你沒有正確的開始/結束路徑，所以當你重繪的時候，前面的路徑沒有被清除，從而再次填充它們。另一種解決方法是隻使用fillRect。

創建路徑的第一步是調用beginPath方法。在內部，路徑以一系列子路徑（線，弧等）的形式存儲在一起，形成一個形狀。每次調用此方法時，列表都會重置，我們可以開始繪製新形狀。

Further Reading