Question

我在js制作麻将游戏，我在画布上加载图片时遇到问题

画布

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 512;
//draw canvas
document.body.appendChild(canvas);

阵列

//Array with Tiles & set length to 144 which are the requested tiles
var tiles = new Array(2);//will be 144
//2D map array for showing the images coordinates
var map = [[69,50],[100,150]];//will be 144 coordinates

我的功能更新（）

function update(){
    for(var i=0;i<tiles.length;i++){
            //make the tile object
    tiles[i] = new Object();    
    tiles[i].id = i ;
    tiles[i].selected = false;
    //set the coordinates from map Array
    tiles[i].x=map[i][0];
    tiles[i].y=map[i][1];
    //tiles[i].ready=false;
                //These are for the image location works fine
    //convert i to String
    var sourceNumber = i.toString();
    //add .png to String
    var source = sourceNumber.concat(png);
    //add /image
    var source = dest.concat(source);   
    tiles[i].img = new Image();
    tiles[i].img.onload = function(){
        //tiles[i].ready=true;
        ctx.drawImage(tiles[i].img,tiles[i].x,tiles[i].y,xdimension,ydimension);
    };
    tiles[i].img.src = source ;

    }
}

我在我的每个浏览器上运行它，它不会加载图像，我在chrome上调试，它在 ctx.drawImage（...）; - ＆gt;上显示未捕获的TypeError：无法读取属性＆＃39; img＆＃39;未定义（重复多次），所以我尝试了 tiles [I] .ready 并在加载图片后仍然有错误。有关如何实现加载的任何建议平铺图像

Answer 1

第一次调用ctx.drawImage时，i的值为2.问题是for循环（for(var i=0;i<tiles.length;i++)）在任何图像加载之前已经完成执行。因此，调用onload函数时i的值是循环停止运行的值。最简单的方法是将索引（i）保存到img元素本身，以便您可以在onload处理程序中检索它。

这是一个简单的代码调整，似乎工作得很好。重要的变化是：

tiles[i].img.iVal = i;
和onload handler的主体。

我也是：

（a）添加了一个数组来保存硬编码的图像名称，而不是动态创建它们（我不得不将某些图像命名为代码计算的格式）

（b）从xdimension电话中删除了ydimension和drawImage个变种，因为我不知道它们是什么。

（c）将.concat(png)更改为.concat(".png")，因为它更容易声明一个名为png的变量，其中包含字符串.png

无论如何，这是我使用的示例代码：

<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener('load', onDocLoaded, false);

var canvas, ctx, tiles, map;

function onDocLoaded()
{
    canvas = newEl('canvas');
    ctx = canvas.getContext('2d');
    canvas.width = canvas.height = 512;
    document.body.appendChild(canvas);

    tiles = new Array(2);
    map = [[69,50],[100,150]];

    update();
}

var imgFileNames = ["img/girl.png", "img/redbaron.png"];

function update()
{
    for(var i=0;i<tiles.length;i++)
    {
        //make the tile object
        tiles[i] = new Object();    
        tiles[i].id = i ;
        tiles[i].selected = false;
        //set the coordinates from map Array
        tiles[i].x=map[i][0];
        tiles[i].y=map[i][1];
        //tiles[i].ready=false;

        //These are for the image location works fine
        //convert i to String
//      var sourceNumber = i.toString();
        //add .png to String
//      var source = sourceNumber.concat(".png");
        //add /image
//      var source = dest.concat(source);   
        tiles[i].img = new Image();
        tiles[i].img.iVal = i;
        tiles[i].img.onload = 
        function()
        {
            var curI = this.iVal;
            ctx.drawImage(tiles[curI].img,tiles[curI].x,tiles[curI].y); 
            // ctx.drawImage(this,tiles[curI].x,tiles[curI].y); //equiv to above line
        };
        tiles[i].img.src = imgFileNames[i];
    }
}
</script>
<style>
canvas
{
    border: solid 1px red;
}
</style>
</head>
<body>
</body>
</html>

无法在画布上为我的js游戏加载图片

1 个答案: