Question

我是HTML 5画布的新手，我正在尝试绘制鼠标所在的矩形，这很好用。但我必须删除最后绘制的矩形。但是当我删除最后绘制的rect时，底层网格显示不正确。我试图将代码添加到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);
}

感谢您的帮助

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

Answer 2

作为markE建议的替代方法，您还可以通过CSS定位将多个<canvas>放在彼此的顶部来对其进行分层。这样你就可以用clearRect删除顶部画布的一部分，而不必重绘它下面的背景画布。

HTML 5删除最后绘制的形状

2 个答案: