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

}