0

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

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。我正在使用图书馆。`

4

2 回答 2

0

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

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

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

于 2013-01-26T21:19:57.353 回答
0

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

var cH = canvas.hight;

应该

var cH = canvas.height;
于 2013-01-26T21:47:15.517 回答