HTML5JavaScript：画布上下文为循环绘制光栅

天哪，我今天觉得自己真的很笨。我只是想在HTML5画布上绘制一个大小相同的不同块的光栅（行和列）。我认为我已经做了很多次了，但由于某种原因，我无法找出让它工作的逻辑

为了了解块将被放置在哪里，我想我已经开始在光栅中绘制不同的矩形。但线条超出了我想在640x480大小的画布上绘制的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();
    }
}

context.fillStyle=“black”；
fillRect（0,060480）；
对于（var x=0；x我现在也觉得自己很愚蠢：D

努力尝试但没有发现我们的问题…

然而，我想出了一种更简单的绘制光栅的方法：分别绘制所有线条

Javascript:

function drawRaster(){
var canv = document.getElementById("mycanvas");
var context = canv.getContext("2d");
var rectWidth = 16;
var rectHeight = 24;
var frameWidth = 512;
var frameHeight = 384;

context.fillStyle="black";
context.fillRect(0, 0, 640, 480);
context.strokeStyle="green";
context.lineWidth = 1;

for (var x = 0, x<=frameWidth, x+=rectWidth){ // Drawing all vertical lines
context.beginPath();
context.moveTo(x,0);
context.lineTo(x,frameHeight);
context.stroke();
}

for (var y = 0, y<=frameHeight, y+=rectHeight){ // Drawing all horizontal lines
context.beginPath();
context.moveTo(0,y);
context.lineTo(frameWidth,y);
context.stroke();
}
}

函数drawRaster（）{
var canv=document.getElementById（“mycanvas”）；
var context=canv.getContext（“2d”）；
宽度=16；
高度=24；
var frameWidth=512；
var frameHeight=384；
context.fillStyle=“black”；
fillRect（0,060480）；
context.strokeStyle=“绿色”；
context.lineWidth=1；
对于（var x=0，x您确定要执行此部分吗

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

或许你是有意的：

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

就是这样！我假设最后两个值是x2和y2坐标，但它们是宽度和高度！这是我缺少的简单的东西！谢谢你的努力，但markE有解决方案！-）我知道这已经有了答案，但是如果你想只基于x和y坐标绘制矩形，你可以这样做：context.rect（x1，y1，x2-x1，y2-y1）；