Javascript 如何在画布上绘制网格？
因此，我正在用javascript开发一个寻路算法，为了好玩和练习，我需要一个网格，我试图让用户决定画布的宽度和高度，并让他们使用提示方法决定网格有多少列和行。我有这段代码，它只画列，不画行，不管我给站点什么输入 设网格={ 宽度：0， 高度:0,， } grid.width=numberproptho要多少列？如果你关心电脑的健康，就不要输入零； grid.height=numberproptho要多少行？如果你关心电脑的健康，就不要输入零； const canvasWidth=numberpropthow要多少像素宽的屏幕？我推荐1000台左右，但我想这取决于你的电脑； const canvasHeight=Numberprompthow您想要多少像素高的屏幕？我建议大约500台，但我想这取决于你的电脑； 让canvas=document.createElementCANVAS； 设ctx=canvas.getContext2d； canvas.width=画布宽度； canvas.height=画布高度； canvas.style.border=1px纯黑色 ctx.beginPath； ctx.lineWidth=1； ctx.lineStyle=黑色； 对于设x=0；x<画布宽度；x+=画布宽度/网格宽度{ ctx.moveTox，0 ctx.lineTox，画布高度 } 对于设y=0；y<画布高度；y+=画布高度/网格高度{ ctx.moveTo0，y ctx.lineTocanvasWidth，y } ctx.stroke；Javascript 如何在画布上绘制网格？,javascript,html,dom,Javascript,Html,Dom,因此，我正在用javascript开发一个寻路算法，为了好玩和练习，我需要一个网格，我试图让用户决定画布的宽度和高度，并让他们使用提示方法决定网格有多少列和行。我有这段代码，它只画列，不画行，不管我给站点什么输入 设网格={ 宽度：0， 高度:0,， } grid.width=numberproptho要多少列？如果你关心电脑的健康，就不要输入零； grid.height=numberproptho要多少行？如果你关心电脑的健康，就不要输入零； const canvasWidth=number
document.body.appendChildcanvas for循环根据其绘制的线的方向使用了不正确的值 应该是：
for(let x = 0; x < canvasHeight; x += canvasHeight / grid.height){
ctx.moveTo(x, 0)
ctx.lineTo(x, canvasHeight)
}
for(let y = 0; y < canvasWidth; y += canvasWidth / grid.width){
ctx.moveTo(0, y)
ctx.lineTo(canvasWidth, y)
}
document.body.appendChildcanvas for循环根据其绘制的线的方向使用了不正确的值 应该是：
for(let x = 0; x < canvasHeight; x += canvasHeight / grid.height){
ctx.moveTo(x, 0)
ctx.lineTo(x, canvasHeight)
}
for(let y = 0; y < canvasWidth; y += canvasWidth / grid.width){
ctx.moveTo(0, y)
ctx.lineTo(canvasWidth, y)
}
document.body.appendChildcanvas 我建议你像这样设置你的流程。它变得更具可读性并提供可扩展性。将用户定义的值作为选项传递给处理创建网格的函数。我为网格选项提供了一些默认值 此外，我建议在绘制到画布之前将偏移舍入 编辑：如果您注意到，您正在绘制模糊的线。您可以通过将上下文转换为0.5、0.5来轻松解决此问题 问：为什么你在0.5分开始x和y？为什么不是0 见： 常量问题=[ 您想要多少列？如果您关心计算机的健康，请不要键入零？， 您想要多少行？如果您关心计算机的健康，请不要键入零？， 你想要多少像素宽的屏幕？我建议1000左右，但我想这取决于你的电脑？， 你希望屏幕有多少像素高？我建议大约500像素，但我想这取决于你的电脑？ ]; 常量选项={ cols:NumberComptQuestions[0]| | 10， 行数：numberComptQuestions[1]| | 10， 宽度：NumberComptQuestions[2]| | 100， 高度：数字比较[3]| | 100 }; document.body.appendChildcreateCa nvasGridoptions； 函数createCanvasGridoptions{ 让canvas=document.createElementCANVAS； 设ctx=canvas.getContext2d； canvas.width=options.width； canvas.height=options.height； canvas.style.border=1px纯红色 ctx.translate0.5，0.5；//https://stackoverflow.com/a/13294650/1762224 ctx.beginPath； ctx.lineWidth=1； ctx.strokeStyle=红色； let offsetX=Math.flooroptions.width/options.cols； 让offsetY=Math.flooroptions.height/options.rows； 对于let x=offsetX；x