HTML5删除最后绘制的形状

我是HTML5画布的新手，我正在尝试在鼠标所在的位置绘制一个矩形，效果很好。但我必须删除最后绘制的矩形。但当我删除最后绘制的矩形时，底层网格显示不正确。我试图将代码添加到JSFIDLE中，但它不起作用：（但是在那里你可以看到代码，也许可以帮助我。正如前面所说，在删除最后绘制的形状时，底层网格会变得混乱

这是我的删除部分：

function eraseCell(cell) {
var x = (cell.column * kSizePix);
var y = (cell.row * kSizePix);

/*canvas_context.beginPath();
canvas_context.rect(x, y, kSizePix, kSizePix);
canvas_context.fillStyle = 'white';
canvas_context.fill();
canvas_context.strokeStyle = "white";
canvas_context.stroke();*/

canvas_context.clearRect(x, y, kSizePix, kSizePix);
}

---

感谢您的帮助

看起来您正试图通过绘制一个白色矩形来“擦除”

这不会撤消最后一个矩形，它只是在顶部的另一个白色矩形上绘制

画布不做分层，它只是在你让它画的地方添加额外的颜料

因此，如果要绘制重叠矩形，然后删除其中一个，可以：

• 保存每个矩形的定义
• 清除整个画布
• 根据保存的定义重新绘制除“已擦除”矩形之外的所有矩形

保存矩形定义的典型方法是在javascript对象中：

var rect1 = { x:50, y:75, width:40, height:20, color:"red" };

用户绘制时，可以将所有累积的矩形保存在一个数组中：

var rectArray=[];

// add the first rectangle rectangle

rectArray.push( { x:50, y:75, width:40, height:20, color:"red" } );

// add more rectangles

rectArray.push( { x:100, y:125, width:20, height:30, color:"green" } );
rectArray.push( { x:110, y:145, width:20, height:30, color:"blue" } );
rectArray.push( { x:120, y:165, width:20, height:30, color:"purple" } );

然后，要重画除最后一个矩形外的所有矩形，可以通过数组枚举从定义中重画每个保存的矩形：

// remove the last rect definition from the array
rectArray.pop();

// clear the canvas and redraw all rects based on their saved definitions

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

for(var i=0; i<rectArray.length; i++){
    var rect=rectArray[i];
    context.beginPath();
    context.rect( rect.x, rect.y, rect.width, rect.height );
    context.stroke();
    context.fillStyle=rect.color;
    context.fill();
}

//从数组中删除最后一个rect定义
rectArray.pop（）；
//清除画布并根据保存的定义重新绘制所有矩形
clearRect（0,0，canvas.width，canvas.height）；
对于（var i=0；i作为markE建议的替代方案，您还可以通过CSS定位将多个
放置在彼此的顶部来分层。这样，您就可以使用
clearRect
擦除顶部画布的部分，而无需在其下方重新绘制背景画布。
非常感谢您，很好的解释和示例：）解决了我的问题