Javascript 单个矩形的单个填充

嘿，我有以下功能：

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

函数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（）； } 函数showMap（）{ canvas=document.getElementById（'map_控制台'）； ctx=canvas.getContext（'2d'）； 对于（变量y=0；y 然而，当我运行这个时——画布上的所有矩形都是相同的颜色……我显然没有正确地迭代循环：(

有什么想法吗

注：

---

world[posY][posX].bgCol

是一种随机的十六进制颜色…

我做的​​在FF、Chrome和Opera中对代码和所有测试进行一些调整和添加： HTML:

脚本：

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

函数randColor（）{
var str=Math.round（16777215*Math.random（））.toString（16）；
返回“#000000”.substr（0,7-str.length）+str；
}
var xSize=6，ySize=8；
var-world=[]；
对于（var x=0；xI）​​在FF、Chrome和Opera中对代码和所有测试进行一些调整和添加：
HTML:



脚本：

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

函数randColor（）{
var str=Math.round（16777215*Math.random（））.toString（16）；
返回“#000000”.substr（0,7-str.length）+str；
}
var xSize=6，ySize=8；
var-world=[]；
对于（var x=0；x而言，此代码之外一定有错误

快速测试工作正常

这只与调用
world
变量的地方的代码不同

ctx是一个全局变量（这可能也是您的情况）。
这段代码之外肯定有错误

快速测试工作正常

这只与调用
world
变量的地方的代码不同

ctx是一个全局变量（这可能也是您的情况）。
看起来不错！谢谢，老实说，我认为这是我的世界数组，但这帮我找到了问题。+1看起来不错！谢谢，老实说，我认为这是我的世界数组，但这帮我找到了问题。+1