javascript - js canvas drawImage 不使用循环变量

Question

我正在尝试根据某些条件将图像加载到 Canvas 中，但仅当我为 drawImage()(drawImage 带有常量注释)函数提供常量作为参数时才会加载图像。我可以添加尽可能多的副本只要我使用常量作为参数，就可以根据需要将图像绘制到 Canvas 上。我的代码有什么问题？请帮忙..

代码如下:
JS:

 slotSize=50px;
    playArea=9;
    var grid=[];

    function renderGrid(grid)
    {
        for(var i=0,y=0;i<playArea;i++,y+=slotSize)
        {
            for(var j=0,x=0;j<playArea;j++,x+=slotSize)
            {
                ctx.fillStyle=grid[i][j];
                if(grid[i][j]=="white")
                {
                    grass=new Image();
                    grass.onload=function()
                    {
                        //console.log(x+","+y);
                        ctx.drawImage(grass,x,y,slotSize-2,slotSize-2);
                        //ctx.drawImage(grass,0,0,slotSize-2,slotSize-2); works!                 
                    }
                    grass.src="../assets/grass.jpg";
                }
                else
                {
                    ctx.fillRect(x,y,slotSize,slotSize);
                }
                ctx.strokeRect(x,y,slotSize,slotSize);
            }

        }
    }

    window.onload=function loadLocal()
    {
        canvas=document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        for(var i=0;i<playArea;i++)
        {
            grid[i]=[];
        }
        for(var i=0;i<playArea;i++)
        {
            for(var i=j;i<playArea;i++)
            {
                grid[i][j]="white";
            }
        }
        renderGrid();
    }

HTML:

<canvas id="canvas" width="450" height="450">
                            Your browser does not support the canvas element.   

Answer 1

http://plnkr.co/edit/h6H3UN45sS6mxtQHlLUz?p=preview

所以基本上你想先了解更多关于变量的上下文和范围的信息。然后您想了解更多有关 Even Listeners 以及如何在异步环境中进行通信的信息。

欢迎提问和评论!

var slotSize=50;
var playArea=9;
var grid=[];
var canvas, ctx;
var grass=new Image();


function renderGrid()
{
    for(var i=0,y=0;i<playArea;i++,y+=slotSize)
    {
        for(var j=0,x=0;j<playArea;j++,x+=slotSize)
        {
            var value = grid[i][j];
            ctx.fillStyle = value;
            if(grid[i][j]=="white")
            {
              console.log(x,y);
              ctx.drawImage(grass,x,y,slotSize-2,slotSize-2);
            }
            else
            {
                ctx.fillRect(x,y,slotSize,slotSize);
            }
            ctx.strokeRect(x,y,slotSize,slotSize);
        }

    }
}

window.onload=function loadLocal()
{
    canvas=document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    for(var i=0;i<playArea;i++)
    {
      grid[i]=[];
      for(var j=i;j<playArea;j++)
      {
          grid[i][j]="white";
      }
    }

    grass.onload = renderGrid;
    grass.src = "http://images.clipartpanda.com/grass-clipart-grass-md.png";
}