javascript - 如何存储创建的 Canvas 对象

Question

我创建了一个事件，为 Canvas 上的每个点击事件创建并排的正方形。但是我如何存储每个方 block ，以便稍后可以通过按方 block 删除最后一个方 block 。

如果这对我创建的方 block 有帮助(然后我为通风口添加了一个事件监听器，请单击 Canvas ，然后运行该函数)。 单击值只是我创建的一个对象，用于存储 Canvas 上的单击次数。 Board 是我的 Canvas 访问变量。

var x =0, y = 3;
    var createSquares = function () {
            var yTimeslength = y * clickValue.length;
            if (yTimeslength<60 ) { 
                board.fillStyle = "orange";
        var square = board.fillRect (0,yTimeslength,y,y);

Answer 1

您可以将基于其绘制正方形的 clickValue 存储在数组中。

var x =0, y = 3, clicks = [];
var createSquares = function () {
    var yTimeslength = y * clickValue.length;
    if (yTimeslength<60 ) { 
        board.fillStyle = "orange";
        var square = board.fillRect (0,yTimeslength,y,y);
        clicks.push(clickValue);
    }
}

因此，您根据 clickValue 绘制的所有方 block 都将在 clicks 数组中可用。

所以，正如你所说，如果你想删除一个方 block ，那么根据用户点击位置，你必须确定哪个clickValue对应于该点击，然后将其从clicks数组中删除，并重新绘制每个方 block 再次。

我根据您的描述创建了一个 fiddle ，希望它有所帮助。 单击空白处，会绘制一个正方形，如果单击一个正方形，则会删除该正方形。

http://jsfiddle.net/b9fssptk/4/