Javascript 修改栅格高度/宽度

我正在做一个项目，这是一个我喜欢的游戏的世界规划师/建设者。我想把网格变成100*54。我一直在处理JSFIDLE上的一些代码，似乎无法得到我想要的。我希望网格正方形的大小为16*16

var canvas=newfabric.canvas（'c'{
选择：false
});
var网格=50；
//创建网格
对于（变量i=0；i<（600/网格）；i++）{
canvas.add（新的fabric.Line（[i*grid，0，i*grid，600]{
笔划：“#ccc”，
可选：false
}));
canvas.add（新的fabric.Line（[0，i*grid，600，i*grid]{
笔划：“#ccc”，
可选：false
}))
}
//添加对象
canvas.add（new fabric.Rect({
左:100,，
前100名，
宽度：50，
身高：50，
填写：“#faa”，
是的，
lockScalingX：对，
lockScalingY：是的，
原文：“左”，
原创：“top”，
中心旋转：正确，
hasControls:false
}));
//捕捉到网格
canvas.on（'object:moving'，函数（选项）{
options.target.set({
左：Math.round（options.target.left/grid）*grid，
顶部：Math.round（options.target.top/grid）*grid
});
});
画布{
边框：1px实心#ccc；
}

这种工作方式：
网格是指网格的像素大小。
您需要两个for循环来指示每个循环有多少行。
for循环根据它经过的循环数生成网格。（所以54表示54行。）

2000表示线的长度（以像素为单位）

工作代码：


var canvas=newfabric.canvas（'c'{
选择：false
});
var网格=16；
//创建网格
对于（变量i=0；i<100；i++）{
canvas.add（新的fabric.Line（[i*grid，0，i*grid，2000]{
笔划：“#ccc”，
可选：false
}))；//水平
}
对于（变量i=0；i<54；i++）{
canvas.add（新的fabric.Line（[0，i*grid，2000，i*grid]{
笔划：“#ccc”，
可选：false
}))；//垂直
}
//添加对象
canvas.add（new fabric.Rect({
左：16，
排名：16，
宽度：16，
身高：16，
填写：“#faa”，
是的，
lockScalingX：对，
lockScalingY：是的，
原文：“左”，
原创：“top”，
中心旋转：正确，
hasControls:false
}));
//添加对象
canvas.add（new fabric.Rect({
左：16，
排名：16，
宽度：16，
身高：16，
填写：“#faa”，
是的，
lockScalingX：对，
lockScalingY：是的，
原文：“左”，
原创：“top”，
中心旋转：正确，
hasControls:false
}));
//捕捉到网格
canvas.on（'object:moving'，函数（选项）{
options.target.set({
左：Math.round（options.target.left/grid）*grid，
顶部：Math.round（options.target.top/grid）*grid
});
});
画布{
边框：1px实心#ccc；
}

这种工作方式：
网格是指网格的像素大小。
您需要两个for循环来指示每个循环有多少行。
for循环根据它经过的循环数生成网格。（所以54表示54行。）

2000表示线的长度（以像素为单位）

工作代码：


var canvas=newfabric.canvas（'c'{
选择：false
});
var网格=16；
//创建网格
对于（变量i=0；i<100；i++）{
canvas.add（新的fabric.Line（[i*grid，0，i*grid，2000]{
笔划：“#ccc”，
可选：false
}))；//水平
}
对于（变量i=0；i<54；i++）{
canvas.add（新的fabric.Line（[0，i*grid，2000，i*grid]{
笔划：“#ccc”，
可选：false
}))；//垂直
}
//添加对象
canvas.add（new fabric.Rect({
左：16，
排名：16，
宽度：16，
身高：16，
填写：“#faa”，
是的，
lockScalingX：对，
lockScalingY：是的，
原文：“左”，
原创：“top”，
中心旋转：正确，
hasControls:false
}));
//添加对象
canvas.add（new fabric.Rect({
左：16，
排名：16，
宽度：16，
身高：16，
填写：“#faa”，
是的，
lockScalingX：对，
lockScalingY：是的，
原文：“左”，
原创：“top”，
中心旋转：正确，
hasControls:false
}));
//捕捉到网格
canvas.on（'object:moving'，函数（选项）{
options.target.set({
左：Math.round（options.target.left/grid）*grid，
顶部：Math.round（options.target.top/grid）*grid
});
});
画布{
边框：1px实心#ccc；
}