在画布上画一个简单的网格？

Question

我已经编写了康威的Java游戏，我想在浏览器中显示它。我想学习一些画布，那么绘制2D网格并用颜色填充每个单元格的首选方法是什么？谢谢。

Answer 1

这将使网格。我认为能够定位或确定某个元素的坐标或其他几个可能的方便用例非常有用。

var grid = function() { 
    for (var i = 0; i < canvasWidth || i < canvasHeight; i += 100) { // 100 represents the width in pixels between each line of the grid 
     // draw horizontal lines 
     ctx.moveTo(i, 0); 
     ctx.lineTo(i, canvasHeight); 
     // draw vertical lines 
     ctx.moveTo(0, i); 
     ctx.lineTo(canvasWidth, i); 
    } 
    ctx.save(); 
     ctx.strokeStyle = 'hsla(200, 0%, 20%, 0.8)'; 
     ctx.stroke(); 
    ctx.restore(); 
}; 

// Call the function 
grid() 

希望这会有所帮助，并且是你试图做太多的东西。 :)

编辑：如果您要用不同的颜色填充每个网格正方形，那么此功能将不起作用，或者至少可以与另一个以类似方式创建并填充正方形的函数组合使用到上面的函数，但根据画布宽度和高度的尺寸关闭宽度和高度。