javascript，fabric.js：如何在一個循環中畫一條線「for」？

Question

它只繪製一條線。我想繪製一個網格。

---

var cnvs = new fabric.Canvas('field1'); 
 
cnvs.selection = false; 
 
cnvs.backgroundColor = 'white'; 
 
var lin = new fabric.Line([22,23,668,23],{ 
 
    strokeWidth: 5,       
 
    stroke: 'rgba(100,200,200,0.5)',   
 
    fill: 'black',        
 
    selectable: false, 
 
    hoverCursor: 'default' 
 
});          
 
cnvs.renderOnAddRemove = false;   
 
for (var y=23;y<500;y=y+50)    
 
{           
 
    lin.set({x1:22,y1:y,x2:668,y2:y}); 
 
    cnvs.Add(lin); 
 
};

感謝._________________________________

Answer 1

function genlin(x1,y1,x2,y2)     
 
{            
 
     var lin = new fabric.Line([x1,y1,x2,y2],{ 
 
     strokeWidth: 5,        
 
\t stroke: 'rgba(100,200,200,0.5)',    
 
\t fill: 'black',        
 
\t selectable: false, \t 
 
\t hoverCursor: 'default' \t 
 
\t });           
 
\t cnvs.add(lin);        
 
};            
 
for (var y=23;y<500;y=y+50) genlin(22,y,668,y); 
 
for (var x=20;x<700;x=x+50) genlin(x,21,x,475);