js canvas drawImage 不适用于循环变量

js canvas drawImage not working with loop variable

本文关键字：循环变量适用于不适用 canvas drawImage js 更新时间：2023-09-26

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

代码如下：
.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.

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

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

欢迎提问和评论！

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