javascript - HTML5 JavaScript : canvas context draw raster in for loop

Question

天啊，我今天感觉自己真的很蠢。我只是想在 HTML5 Canvas 上绘制不同大小的 block 的栅格(行和列)。我虽然以前已经做过很多次了，但由于某种原因我无法弄清楚让它发挥作用的逻辑!

为了了解 block 的放置位置，我想我已经开始在栅格中绘制不同的矩形。但这些线条超出了我想在 640x480 大小的 Canvas 上绘制的 512x384 区域。就好像矩形画得太大了!

我确信有一些东西是我忽略的，但我看不到它!

context.fillStyle="black";
context.fillRect(0, 0, 640, 480);
for (var x = 0; x<512; x=x+16)
{
    for(var y = 0; y<384; y=y+24)
    {
        context.beginPath();
        context.rect(x,y,x+16,y+24);
        context.strokeStyle="green";
        context.stroke();
    }
}

Answer 1

您确定要执行此部分吗？

context.rect(x,y,x+16,y+24);

或者也许你的意图是这样:

context.rect(x,y,16,24);