Поле заполнения массивом

Рейтинг: 0Ответов: 1Опубликовано: 05.07.2011

Подскажите, пожалуйста. Как мне занести весь мой массив в будущее поле (нарисованное с помощью канвас) и закрасить каждую ячейку цветами, соответствующими номеру в ячейке массива. А поле канвас будет выглядеть как простая таблица.

Разметка:

<canvas id="can1" width="300" height="300"></canvas>

Скрипт:

function cubik() {    
    var myCanvas = document.getElementById("can1");

    if (!myCanvas.getContext) {
        return;
    }
    var myContext = myCanvas.getContext("2d");
    //здесь будет нарисована таблица, еще не нашел решение!
}
cubik();

var myArr;

function main(sizeX, sizeY) {    
    myArr = Array(sizeX);

    for (var i = 0; i < myArr.length; i++) {
        myArr[i] = Array(sizeY);

        for (var j = 0; j < myArr[i].length; j++) {
            myArr[i][j] = Math.round(Math.random() * 4);
        }
    }
}

function () {
    main(20, 30);
}
javascript
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Как-то так:

<html>
<head>
<script>
function draw() {
    var colors =
    [
        ["#000", "#111", "#222"],
        ["#333", "#444", "#555"],
        ["#666", "#777", "#888"]
    ];

    var canvas = document.getElementById("z");
    var context = canvas.getContext("2d");

    for (i = 0; i < 3; i++) {
        for (j = 0; j < 3; j++) {
            context.strokeStyle = colors[i][j];
            context.fillStyle = colors[i][j];
            context.fillRect(i * 90, j * 90, 90, 90);
        }        
    }
}
</script>
</head>
<body>
    <canvas id="z" height="270" width="270" />
</body>
</html>