在画布中绘制一个简单的网格？答案

【问题标题】：Drawing a simple grid in canvas?在画布中绘制一个简单的网格？
【发布时间】：2012-05-04 14:32:50
【问题描述】：

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

【问题讨论】：

【解决方案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()

希望这会有所帮助，这也是您正在尝试做的事情。 :)

编辑：如果您希望用不同的颜色填充每个网格方块，那么这个函数将不起作用，或者至少可以与另一个函数结合使用，该函数以与函数类似的方式创建和填充方块以上，但根据画布宽度和高度的尺寸切割宽度和高度。

【讨论】：