Question

我在两个不同的地方绘制使用加载器方法加载的图像。但它只显示第二个。（我正在关注此http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/）

如果我添加提醒（），它可以在Fx中使用，但不能在Chrome中使用。我希望它能在没有警报的情况下在任何地方工作（）

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

ImageOnload（ “O”，120120）; //此图片未显示

提醒（“如果我添加提醒，它仅适用于Fx但不适用于Chrome”）

ImageOnload（“O”，120,20）; //只显示???

<html>
    <head>
    </head>
    <script type="text/javascript" >
        var ctx;
        var ImageVariable={};

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

            ImageBuilder(ImageSourceDB);
            ImageOnload("O",120,120); //This image is not displaying
                    //alert("If i add alert it works only in FFox but not in chrome")
            ImageOnload("O",120,20);  
        }

        var ImageSourceDB=
        {
            X:"./Images/X.gif",
            O:"./Images/O.gif"
        }
        function ImageBuilder(ImageSrcDB)
        {
            for (iSrc in ImageSrcDB)
            {
                ImageVariable[iSrc]= new Image();   
                    ImageVariable[iSrc].src = ImageSrcDB[iSrc];
            }
        }

        function ImageOnload(ImageSrc,x,y)
        {
            ImageVariable[ImageSrc].onload= function ()
            {
                ctx.drawImage(ImageVariable[ImageSrc],x,y);
            };          
                    ImageVariable[ImageSrc].src = ImageSourceDB[ImageSrc];
        }
    </script>
    <body>
        <canvas class ="pattern" id="gameLoop" height="300"  width="300" />
    </body>
</html>

列出项目

Answer 1

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>

javaScript多次映像无法加载

1 个答案: