javaScript多次图像未加载

我画的图像是加载在两个不同的地方使用加载方法加载。但它只显示第二个。我正在关注这一点

如果我添加一个警报，它在Fx中有效，但在Chrome中无效。我希望它在任何地方都能正常工作

如果我尝试在不使用预加载图像的情况下绘制图像，我将获得所需的结果。但我认为这是额外的负担http://www.html5canvastutorials.com/tutorials/html5-canvas-images/

ImageOnloadO，120120//此图像不显示

警报如果我添加警报，它只在Fx中有效，在Chrome中无效

ImageOnloadO，120,20//只有这个在显示

列表项

ImageOnload("O",120,120); //This image not displaying
ImageOnload("O",120,20);//only this is displaying ???

您忘记更改对象的id：

ImageOnload("O",120,120);
ImageOnload("X",120,20); // Use "X", not "O"!!!

如果你仍然想显示O两次，那么你应该画两次，但是只有一个onload函数。见下例：

<script type="text/javascript" >
    var ctx;
    var ImageVariable={};
    var ImageSourceDB = {
        X:"./Images/X.gif",
        O:"./Images/O.gif"
    }

    window.onload = function() {
        var canvas = document.getElementById("gameLoop");   
        ctx = canvas.getContext("2d");

        ImageBuilder(ImageSourceDB);

        ImageVariable["O"].onload = function() {
            // this will be executed when the image "O" is loaded
            // this is a pointer to ImageVariable["O"]
            ctx.drawImage(this, 120, 120);
            ctx.drawImage(this, 120, 20);
        }
        ImageVariable["X"].onload = function() {
            // this will be executed when the image "X" is loaded
            ctx.drawImage(this, 30,  30);
        }
    }        
    function ImageBuilder(ImageSrcDB) {
        for (iSrc in ImageSrcDB) {
            ImageVariable[iSrc]= new Image();   
            ImageVariable[iSrc].src = ImageSrcDB[iSrc];
        }
    }
</script>

---

谢谢你的回复。我没有忘记id，但我想在不同的位置绘制两次相同的图像。晚了一天…………希望我能得到一些帮助：问题是，您正在尝试为ImageSourceDB中的相同图像附加两个不同的加载操作。你为什么不先复制它呢？嗨，约翰，很高兴你的here:D。你能帮我编写代码吗，我对JavaScript和HTML5非常陌生，希望我不要要求太多：！我将编辑答案。希望对初学者有帮助。但我必须说，你开始学习javascript并不是一件容易的事情。

<script type="text/javascript" >
    var ctx;
    var ImageVariable={};
    var ImageSourceDB = {
        X:"./Images/X.gif",
        O:"./Images/O.gif"
    }

    window.onload = function() {
        var canvas = document.getElementById("gameLoop");   
        ctx = canvas.getContext("2d");

        ImageBuilder(ImageSourceDB);

        ImageVariable["O"].onload = function() {
            // this will be executed when the image "O" is loaded
            // this is a pointer to ImageVariable["O"]
            ctx.drawImage(this, 120, 120);
            ctx.drawImage(this, 120, 20);
        }
        ImageVariable["X"].onload = function() {
            // this will be executed when the image "X" is loaded
            ctx.drawImage(this, 30,  30);
        }
    }        
    function ImageBuilder(ImageSrcDB) {
        for (iSrc in ImageSrcDB) {
            ImageVariable[iSrc]= new Image();   
            ImageVariable[iSrc].src = ImageSrcDB[iSrc];
        }
    }
</script>