Question

嘿，我有以下功能：

function rect(x,y,w,h,col) {
    ctx.beginPath();
    ctx.rect(x,y,w,h);
    ctx.lineWidth = '1px';
    ctx.fillStyle = col;
    ctx.stroke();
    ctx.closePath();
    ctx.fill();
}
function showMap() {
    canvas = document.getElementById('map_console');
    ctx = canvas.getContext('2d');
    for (var y = 0; y < world.length; y++) {
        for (var x = 0; x < world[y].length; x++) {
            rect(6*(y+6),6*(x+6),6,6,world[posY][posX].bgCol);
        }
    }

但是，当我运行它时 - 画布上的所有矩形都是相同的颜色......我显然没有正确地遍历循环：（

有什么想法吗？

注意：
world[posY][posX].bgCol是随机的十六进制颜色......

Answer 1

我对你的代码进行了一些调整和补充，所有这些都在我的FF，Chrome，Opera测试中有效： HTML：

<canvas id="map_console" width="300px" height="500px"></canvas>

SCRIPT：

function randColor() {
    var str=Math.round(16777215*Math.random()).toString(16);
    return "#000000".substr(0,7-str.length)+str;
}

var xSize=6,ySize=8;
var world=[];
for(var x=0;x<xSize;x++) {
    world[x]=[];
    for(var y=0;y<ySize;y++)
      world[x][y]={bgCol:randColor()};
}

function rect(x,y,w,h,col) {
    ctx.beginPath();
    ctx.rect(x,y,w,h);
    ctx.lineWidth = '1px';
    ctx.fillStyle = col;
    ctx.stroke();
    ctx.closePath();
    ctx.fill();
}
function showMap() {
    canvas = document.getElementById('map_console');
    ctx = canvas.getContext('2d');
    for (var x = 0; x < world.length; x++) {
        for (var y = 0; y < world[x].length; y++) {
            rect(40*x,40*y,40,40,world[x][y].bgCol);
        }
    }
}

showMap();

此示例位于jsfiddle.net：http://jsfiddle.net/dMSE5/

Answer 2

此代码之外一定有问题。

快速测试here工作正常。

这仅与您调用world变量的地方的代码不同。

事实上，ctx是一个全局变量（也可能是你的情况）。

单个填充单个矩形

2 个答案: