HTML 5 删除最后绘制的形状答案

【问题标题】：HTML 5 deleting last drawn shapeHTML 5 删除最后绘制的形状
【发布时间】：2013-11-21 22:42:39
【问题描述】：

我是 HTML 5 画布的新手，我正在尝试在鼠标所在的位置绘制一个矩形，这很好用。但我必须删除最后绘制的矩形。但是当我删除最后一个绘制的矩形时，底层网格显示不正确。我尝试将代码添加到 jsfiddle 但它不起作用:(http://jsfiddle.net/L5YE8/ 但在那里你可以看到代码并可能对我有帮助。正如所说的，在删除最后一个绘制的形状时底层网格会变得混乱。

这是我的删除部分：

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

感谢您的帮助

【问题讨论】：

标签： html html5-canvas

【解决方案1】：

您似乎正试图通过绘制一个白色矩形来“擦除”。

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

Canvas 不做分层，它只是在你告诉它绘制的地方添加额外的油漆。

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

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

保存矩形定义的典型方法是在 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();
}

【讨论】：

非常感谢，很好的解释和例子:) 解决了我的问题

【解决方案2】：

作为 markE 建议的替代方案，您还可以通过 CSS 定位将多个 <canvas>'es 分层放置。这样您就可以使用 clearRect 擦除顶部画布的部分内容，而无需重新绘制其下方的背景画布。

【讨论】：