java - 在画布中绘制一个简单的网格？

Question

我用 Java 编写了 Conway 的 Game Of Life，我想在浏览器中显示它。我想学习一些 Canvas，那么绘制 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()

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

编辑：如果您希望用不同的颜色填充每个网格正方形，则此功能将不起作用，或者至少可以与另一个以与上述功能类似的方式创建和填充正方形但切割的功能结合使用宽度和高度关闭基于画布宽度和高度的尺寸。