Fabricjs重复

Question

我一直在学习fabricJS，因为我正在学习它，我已经创建了90个矩形。下面的代码显示的90

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

2和使用canvas.remove(land1,land2或canvas.add(land1,land2取决于降菜单选择。

我试过Google搜索如何重复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也。我的小提琴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, 
    }); 

}