Question

我试图生成一个基于图块的地图，到目前为止工作得很好，但在更换了所有的＆＃34;测试矩形后＃34;用图像来表示地面，路径，一些房屋等（在这种情况下，所有这些图像都是相同的图像），而不是单个图像被绘制出来。

我在这里做错了什么？我也得到零错误。

下面的代码剪断了：

    // generate a large map     
    Map.prototype.generate = function(){
        var ctx = document.createElement("canvas").getContext("2d");        
        ctx.canvas.width = this.width;
        ctx.canvas.height = this.height;        

        var rows = ~~(this.width/<?php echo $GAME['map']['tileSize'] + $GAME['map']['tileBorder']; ?>) + 1;
        var columns = ~~(this.height/<?php echo $GAME['map']['tileSize'] + $GAME['map']['tileBorder']; ?>) + 1;

        ctx.save(); 

        // Here i wanted to check if the image gets drawn right besides the player
        var testImage = document.createElement('img'); // Also tried new Image();
        testImage.onload = (function () {
            console.log(testImage + "-test");
            ctx.drawImage(testImage, 1000, 1000, <?php echo $GAME['map']['tileSize']; ?>, <?php echo $GAME['map']['tileSize']; ?>);
        }());
        testImage.src = "http://192.168.0.140/img/terrain.png";

        var imgs = [];
        var imgIndex = 0;

        <?php echo "for (var y = 0, i = ".$tilesToLoad['xStart']."; i < ".($tilesToLoad['xStart'] + $GAME['map']['chunkSize'])."; y+=".($GAME['map']['tileSize'] + $GAME['map']['tileBorder']).", i++) {"; ?>

            <?php echo "for (var x = 0, j = ".$tilesToLoad['yStart']."; j < ".($tilesToLoad['yStart'] + $GAME['map']['chunkSize'])."; x+=".($GAME['map']['tileSize'] + $GAME['map']['tileBorder']).", j++) {"; ?>
                imgs[imgIndex] = document.createElement('img');                 
                imgs[imgIndex].onload = (function () {
                    console.log(imgs[imgIndex] + "-" + imgIndex + "-" + x + "-" + y);
                    ctx.drawImage(imgs[imgIndex], x, y, <?php echo $GAME['map']['tileSize']; ?>, <?php echo $GAME['map']['tileSize']; ?>);
                }());
                imgs[imgIndex].src = "http://192.168.0.140/img/terrain.png";
                imgIndex += 1;
            }
        }

        ctx.restore();  

        // store the generate map as this image texture
        this.image = new Image();
        this.image.src = ctx.canvas.toDataURL("image/png");                 

        // clear context
        ctx = null;
    }

console.log输出：

 [object HTMLImageElement]-test
 [object HTMLImageElement]-0-0-0
 [object HTMLImageElement]-1-41-0
 [object HTMLImageElement]-2-82-0
 [object HTMLImageElement]-3-123-0

Answer 1

由于您已将onload函数编写为IIFE，因此效果不佳。它在分配src之前立即执行该函数，并且没有将onload分配给该函数。

将第一个onload分配更改为：

    testImage.onload = function () {
        console.log(testImage + "-test");
        ctx.drawImage(testImage, 1000, 1000, <?php echo $GAME['map']['tileSize']; ?>, <?php echo $GAME['map']['tileSize']; ?>);
    };

我所做的一切都是删除了外括号。对于后来的任务也是如此：

    imgs[imgIndex].onload = function () {
            console.log(imgs[imgIndex] + "-" + imgIndex + "-" + x + "-" + y);
            ctx.drawImage(imgs[imgIndex], x, y, <?php echo $GAME['map']['tileSize']; ?>, <?php echo $GAME['map']['tileSize']; ?>);
    };

我建议删除ctx = null;赋值，因为如果在onload事件之前执行，那么它们将无法在画布上绘制图像，而是会得到 未捕获的TypeError：无法读取属性＆＃39; drawImage＆＃39;为null

另外，正如Blindman67所指出的，在所有onload事件被触发后，需要进行更改以从画布中创建图像。要做到这一点，您可以使用一个计数器，类似于this example，在加载一组图像后会显示警告。

Canvas.drawImage只是不绘制图像

1 个答案: