javascript - JavaScript 配列の配列: 定義されていない要素

Question

私は 9 セル グリッド (3x3) を定義する必要があり、各グリッドにキャンバス要素がある JavaScript でキャンバス アプリケーションを開発しています。

問題は、各セルのサイズを表すデータを持つ 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 インスペクターで次の出力が生成されます。

私が知る限り、次のコードを使用して 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 は次のタグを生成します。各キャンバス要素。

配列の宣言に何か問題がありますか?

編集

シンプルさと読みやすさのために、コードにいくつかの変更を加えました。

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]);

このコードは、機能が少ししかない以前のバージョンよりもはるかに完全です。

その間、3つのセルをレンダリングすることができました（ただし、1x3であるはずの3つのセルは、実際には2x1です.何らかの形でレンダリングが適切に行われていないため、これはCSSの問題である可能性があります）

EDIT2

繰り返しますが、上記のコードにいくつかの変更を加えました。そして、グリッド アレイの展開ビューの新しいスクリーンショット。