在 HTML 5 画布元素上绘制网格

Question

我一直在到处搜索，找不到如何在 HTML5 Canvas 上绘制网格。我是 HTML5 和画布的新手。

我知道如何绘制形状，但要花很长时间才能理解这个绘图网格。

有人可以帮我吗？

原文由 Jay Mayu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

答案取自这里 Grid drawn using a element looking stretched

稍微修改了一下，希望对你有帮助

 // Box width
var bw = 400;
// Box height
var bh = 400;
// Padding
var p = 10;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function drawBoard(){
    for (var x = 0; x <= bw; x += 40) {
        context.moveTo(0.5 + x + p, p);
        context.lineTo(0.5 + x + p, bh + p);
    }

    for (var x = 0; x <= bh; x += 40) {
        context.moveTo(p, 0.5 + x + p);
        context.lineTo(bw + p, 0.5 + x + p);
    }
    context.strokeStyle = "black";
    context.stroke();
}

drawBoard();

 body {
    background: lightblue;
}
#canvas {
    background: #fff;
    margin: 20px;
}

 <div>
    <canvas id="canvas" width="420px" height="420px"></canvas>
</div>

原文由 John Mayer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

// Box width
var bw = 270;
// Box height
var bh = 180;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function drawBoard(){
    context.lineWidth = 10;
    context.strokeStyle = "rgb(2,7,159)";
    for (var x = 0; x < bw; x += 90) {
        for (var y = 0; y < bh; y += 90) {
           context.strokeRect(x+10, y+10, 90, 90);
        }
    }
}
drawBoard();

原文由 Dinesh 发布，翻译遵循 CC BY-SA 4.0 许可协议