数组的JavaScript数组：未定义元素

我一直在用javascript开发一个画布应用程序，其中我需要定义一个9单元网格（3x3），每个网格中都有一个画布元素

问题是，我已经有了一个名为grid的数组，其中的数据表示每个单元格的大小

var grid = new Array();

grid[0] = {x:[0, elemWidth], y:[0, elemHeight]};
grid[1] = {x:[elemWidth, elemWidth*2], y:[0, elemHeight]};
grid[2] = {x:[(elemWidth*2), sWidth], y:[0, elemHeight]};
grid[3] = {x:[0, elemWidth], y:[elemHeight+1,elemHeight*2]};
grid[4] = {x:[elemWidth, elemWidth*2], y:[elemHeight, elemHeight*2]};
grid[5] = {x:[(elemWidth*2), sWidth], y:[elemHeight, elemHeight*2]};
grid[6] = {x:[0, elemWidth], y:[(elemHeight*2), sHeight]};
grid[7] = {x:[elemWidth, elemWidth*2], y:[(elemHeight*2), sHeight]};
grid[8] = {x:[(elemWidth*2), sWidth], y:[(elemHeight*2), sHeight]};

这将在Chrome Inspector上生成以下输出：

据我所知，我应该能够通过使用以下代码获得x和y值

canvas[i].fillRect(grid[i].x[0], grid[i].y[0], grid[i].x[1], grid[i].y[1]);
canvas[i].strokeRect(grid[i].x[0], grid[i].y[0], grid[i].x[1], grid[i].y[1]);

每个都应该给我相应的值

我不明白为什么在

canvas[0]

（所有内容都在浏览器上渲染）上都可以正常运行，但是在后续的

canvas[I]

（使用I>0）上不会渲染，而且我得到了一个未定义的值，尽管HTML为每个canvas元素生成了标记

我在声明数组时是否做错了什么

编辑 为了简单易读，对代码做了一些更改：

function createCanvas() {

/* criar grelha aqui */

var sWidth = window.innerWidth; //- 50;
var sHeight = window.innerHeight; //- 50;

var elemWidth = sWidth / 3;
var elemHeight = sHeight / 3;

var grid = new Array();

var row1 = [0, elemHeight];
var row2 = [elemHeight, elemHeight*2];
var row3 = [elemHeight*2, sHeight];

var col1 = [0, elemWidth];
var col2 = [elemWidth, elemWidth*2];
var col3 = [elemWidth*2, sWidth];

grid[0] = [col1, row1];
grid[1] = [col2, row1];
grid[2] = [col3, row1];
grid[3] = [col1, row2];
grid[4] = [col2, row2];
grid[5] = [col3, row2];
grid[6] = [col1, row3];
grid[7] = [col2, row3];
grid[8] = [col3, row3];

for (var i = 0; i < grid.length; i++) {
    var c = document.getElementById('content');
    var newCanvas = document.createElement('canvas');
    newCanvas.setAttribute('id', 'canvas'+i);
    c.appendChild(newCanvas);
    canvas[i] = new Canvas('canvas'+i, 0, function() {});
        canvas[i].clear();
        canvas[i].setAutoResize(true);
        canvas[i].canvasElement.width = elemWidth - 2;
        canvas[i].canvasElement.height = elemHeight - 2;


        canvas[i].fillStyle('#000000');
        canvas[i].strokeStyle('#FFFFFF');

    canvas[i].fillRect(grid[i][0], grid[i][0], grid[i][2], grid[i][3]);
    canvas[i].strokeRect(grid[i][0], grid[i][0], grid[i][4], grid[i][5]);

函数createCanvas（）{
/*克里尔·格雷哈·阿奎*/
var sWidth=window.innerWidth；//-50；
var sHeight=window.innerHeight；/-50；
var elemWidth=开关/3；
var elemHeight=sHeight/3；
var grid=新数组（）；
var row1=[0，elemHeight]；
var row2=[elemHeight，elemHeight*2]；
var row3=[elemHeight*2，sHeight]；
var col1=[0，elemWidth]；
var col2=[elemWidth，elemWidth*2]；
var col3=[elemWidth*2，sWidth]；
网格[0]=[col1，row1]；
网格[1]=[col2，row1]；
网格[2]=[col3，第1行]；
网格[3]=[col1，row2]；
网格[4]=[col2，row2]；
网格[5]=[col3，row2]；
网格[6]=[col1，row3]；
网格[7]=[col2，row3]；
网格[8]=[col3，row3]；
对于（变量i=0；i

这段代码比以前的版本要完整得多，以前的版本只有一点点函数

同时，我设法得到了3个单元格进行渲染（虽然3个单元格，应该是1x3，实际上是2x1，因为渲染过程没有正常进行，我认为这可能是CSS问题）

编辑2 同样，我对上面的代码做了一些修改，并对网格阵列展开视图进行了新的截图。

---

请记住，绘制画布时的原点为0,0。画布在页面上的位置无关紧要，您仍将从该位置绘制。不要尝试根据画布在页面上的位置进行偏移。（与问题无关，但）这是不必要的：

var col1=new Array（）；col1=[0，elemWidth]；

您正在定义一个

新数组

，然后使用

[]

定义一个新数组。如果您想要一个新数组，不管是否为空，只需使用

[]

表示法。@Zed\u Blade我不确定你是否理解Mattt的观点。你的网格位置正确，是的，但在每个

画布上，你仍然必须
从
（0,0）
填充
，而不是像
网格上的
（网格.宽度*2，网格.高度*2）
。是的，我所指出的对您遇到的任何问题都没有实际影响（看起来）。我只是想指出，您不应该在技术上声明两次变量，而应该只使用
[]
@Zed\u Blade no，
grid[0][0]
是
col1
，它仍然是一个数组（
[0，elemWidth]
）.我觉得你把事情弄得有点太复杂了。如果你头脑不清楚，多维数组可能会令人沮丧。我建议你先放下你的代码，回顾一下你试图绘制的整个网格和矩形，指出绘制点，然后有希望找到（重新创建）一个
网格[]
您有信心知道它为什么会这样。