javascript - Fabricjs重复

Question

我一直在学习 FabricJS，因为我正在学习它，所以我单独创建了 90 个矩形。下面的代码显示了 90 个中的 2 个。

    var land1 = new fabric.Rect({
    fill: 'green',
    left: 725,
    top: 225,
    width: 25,
    height: 25,    
    perPixelTargetFind: true,
    hasBorders: true, 
    hasControls: false,
    hasRotatingPoint: false,
});

var land2 = new fabric.Rect({
    fill: 'green',
    left: 725,
    top: 225,
    width: 25,
    height: 25,    
    perPixelTargetFind: true,
    hasBorders: true, 
    hasControls: false,
    hasRotatingPoint: false,
});

并根据下拉菜单选择使用canvas.remove(land1,land2)或canvas.add(land1,land2)。

我尝试过谷歌搜索如何重复 1 个矩形 90 次，所以我只需要有 1 个土地。但我确实尝试了这个，但没有成功(也许是因为我写错了)。

    for (var i = 0; i < 91; i++) {
var land + i = new fabric.Rect({
        fill: 'green',
        left: 725,
        top: 225,
        width: 25,
        height: 25,    
        perPixelTargetFind: true,
        hasBorders: true, 
        hasControls: false,
        hasRotatingPoint: false,
    });

任何人都可以为我指出正确的方向来完成此任务并执行 canvas.add 操作。我的 fiddle JSfiddle

Answer 1

你可以使用 javascript 数组来做到这一点 例如

var land = [];
for (var i = 0; i < 91; i++) {
var land[i] = new fabric.Rect({
        fill: 'green',
        left: 725,
        top: 225,
        width: 25,
        height: 25,    
        perPixelTargetFind: true,
        hasBorders: true, 
        hasControls: false,
        hasRotatingPoint: false,
    });

}