简单的网格绘制不起作用

Question

我正在尝试在画布上绘制一个简单的网格。 首先我做到了

function start()
{   
   var x = 0;
   var y = 0;

    for (x = 0; x < 500; x += 50)
    {
        line(0 + x, 50 + y, 50 + x, 50 + y, 1, "#111");
        line(50 + x, 0 + y, 50 + x, 50 + y, 1, "#111");

        if (x == 450)
        {
            x = -50;
            y += 50;
        }
        if (y == 500)
        {
            x = 500;
        }
    }
}

工作正常。 但我希望能够轻松更改网格和画布的大小。 所以我这样做：

function start()
{   
    var x = 0;
    var y = 0;
    var cW = canvas.width;
    var cH = canvas.hight;
    var gS = 50; //gS = gridSpace

    for (x = 0; x < cW; x += gS)
    {
        line(0 + x, gS + y, gS + x, gS + y, 1, "#111");
        line(gS + x, 0 + y, gS + x, gS + y, 1, "#111");

        if (x == cW - gS)
        {
            x = -gS;
            y += gS;
        }
        if (y == cH)
        {
            x = cW;
        }
    }
}

这是行不通的！ 请帮我。

PS。 我正在使用图书馆。 `

Answer 1

您可能希望以不同的方式处理此问题。 我不确定您要在这里完成什么，但是这里有一些指示/问题可能会指导您完成您想做的事情：

• 绘制网格时，您将绘制一系列水平线和一系列垂直线。 使用两个循环来简化该过程。
• 对于水平线，y值有所不同，但线端点的x坐标保持不变（例如0和cW）。 相反，适用于垂直线。
• 您真正想达到哪种间距？ 通常，您正在考虑将空间划分为一定数量的区域（例如6行和4列），或者不适应您正在绘制的特定画布的间距（这就是您的代码看起来去做）。 因此，第一个将适应画布的大小，而后者将随画布大小的变化而显示更多/更少的行/列。

希望可以帮助您解决问题，如果您需要更多帮助，请告诉我！

Answer 2

一种可能性是，你有height拼写错误。 我相信javascript（如果是javascript）不会抱怨变量名不正确。 （对此我可能是错的）。

var cH = canvas.hight;

应该

var cH = canvas.height;