1

2 つの異なる場所でローダー メソッドを使用して読み込まれた画像を描画しています。しかし、それは2番目のものだけを表示します。（私はこれに従っています http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/）

alert() を追加すると、Fx では機能しますが、Chrome では機能しません。alert() なしでどこでも動作するようにしたい

プリロードされた画像を使用せずに画像を描画しようとすると、望ましい結果が得られます。しかし、私はそれが余分な負荷だと思っています (http://www.html5canvastutorials.com/tutorials/html5-canvas-images/)

ImageOnload("O",120,120); //この画像は表示されていません

alert("アラートを追加すると、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>

リスト項目

4

1 に答える 1

0 
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」を 2 回表示したい場合は、2 回描画する必要がありますが、onload関数は 1 つだけです。以下の例を参照してください。

<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>
于 2012-06-10T16:19:46.580 に答える