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-coords保持不变（例如0和cW）。反过来适用于垂直线。
你真的想要达到什么样的间距？通常，您正在考虑将空间划分为一定数量的区域（例如6行和4列），或者间距不适应您正在绘制的特定画布（这就是您的代码似乎要做的事）。因此，第一个将适应画布的大小，而后者将在画布大小变化时显示更多/更少的行/列。

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

Answer 2

一种可能性是，height拼写错误。我相信javascript，如果这是javascript，将不会抱怨错误命名的变量。（我可能错了）。

var cH = canvas.hight;

应该是

var cH = canvas.height;

简单的网格绘制不起作用

2 个答案: