HTML5 javascript：画布上下文在for循环中绘制光栅答案

【问题标题】：HTML5 javascript: canvas context draw raster in for loopHTML5 javascript：画布上下文在for循环中绘制光栅
【发布时间】：2014-03-18 21:18:12
【问题描述】：

男孩，我今天觉得自己很愚蠢。我只是想在 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();
    }
}

【问题讨论】：

我知道这已经有了答案，但是如果您想仅基于 x 和 y 坐标绘制矩形，则可以这样做： context.rect(x1, y1, x2-x1 , y2-y1);

标签： javascript html canvas for-loop raster

【解决方案1】：

您确定要执行此部分吗？

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

或者也许你的本意是这样的：

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

【讨论】：

就是这样！我假设最后两个值是 x2 和 y2 坐标，但它们是宽度和高度！这是我缺少的简单的东西！

【解决方案2】：

我现在也觉得自己很蠢 :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();
}
}

-- 这仍然不起作用，但改进了概念--

【讨论】：

感谢您的努力，但 markE 有解决方案！ :-)