1

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

编辑：我发现只有在打开 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>
4

1 回答 1

1

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

在这里试试。

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）（但实际上没关系）

要修复它，您必须使该功能不会立即运行。此外，由于它位于循环内部并且使用范围变量，因此需要格外小心。请参阅演示中的代码。

　>固定演示！<

于 2012-06-08T01:39:16.343 回答