Question

我创建了一个事件，可以为画布上的每个点击事件左右创建正方形。但是我如何存储每个方块以便稍后我可以通过按方块删除最后一个方格。

如果这对我创建的正方形的函数有帮助（我已经为画布添加了一个EventListener点击画布，然后运行该函数）。 Click Value只是我创建的一个对象，用于存储画布上的点击次数。 Board是我的画布访问变量。

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绘制的所有方块都将在click数组中可用。

所以，正如你所说，如果你想删除一个正方形，那么根据用户点击pos，你必须确定哪个clickValue对应于点击，然后从点击数组中删除它，并重新绘制每个正方形试。

我已经为你的描述创造了一个小提琴，希望它有所帮助。单击空白区域，绘制一个正方形，如果单击正方形，则删除正方形。

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

Answer 2

最好使用支持交互性和对象模型的现成引擎。

例如CreateJS或PIXI.JS或Fabric.js或其他..

如何存储创建的画布对象

2 个答案: