Question

单击按钮时，以下代码应在网格中显示图像。问题是我必须单击两次按钮才能看到图像。即使图像没有显示，我也会在两个函数调用上获得日志输出。发生了什么事？

编辑：我发现问题只发生在chrome开发人员工具打开时，所以这不是一个javascript问题。

EDIT2：除了接受的答案，这个链接帮助了我：Javascript Canvas Element - Array Of Images

<html>
    <head>
        <title>Canvas Test</title>

        <script>
            function init() {
                var canvas = document.getElementById("canvas");
                context = canvas.getContext("2d");
                images = new Array();
            }

            function drawImage() {
                for (var i = 0; i < 12; i++) {
                    for (var j = 0; j < 12; j++) {
                        var index = i*12 + j;
                        images[index] = new Image();
                        images[index].src = 'image.jpg';
                        images[index].onload = function(image, index, i, j) {
                            console.log(index);
                            context.drawImage(image, i * 20, j * 20, 20, 20);
                            console.log("Loading image: " + image.src);
                        } (images[index], index, i, j);
                    }
                }
            }
        </script>

    </head>
    <body onload="init();">
        <canvas id="canvas" width="300px" height="300px" style="border: solid;"></canvas>
        <button onclick="drawImage();">Display Image</button>
    </body>
</html>

Answer 1

实际上你的代码有效。但有时图片没有加载，你必须点击两次按钮。

Try it here.

2个问题：

首先，

function(image, index, i, j) {
    console.log(index);
    context.drawImage(image, i * 20, j * 20, 20, 20);
    console.log("Loading image: " + image.src);
}(images[index], index, i, j);

这将以正确的方式启动，因为最后()意味着运行它。这就是你必须点击两次的原因。

其次，src应该是最后的。（MDN）（但实际上并不重要）

要修复它，您必须使该功能不会立即运行。另外，因为它在循环内部并且它使用范围变量，所以需要额外注意。请参阅演示中的代码。

>FIXED DEMO!<

第一次函数调用时不显示图像 - HTML5 / Canvas

1 个答案: