0

JavaScript で簡単なアニメーションの例を作成しようとしています。しかし、私は画像を持っていて、インターネットで見つけたものや以前の投稿で見たものすべてを試しましたが、この画像のサイズが変更されない理由がわかりません。誰かが私に何が問題なのか教えてもらえますか?

        var x = 50;  
        var y = 20;  

        var xDirection = 1; 
        var yDirection = 1; 
        var image = new Image(); 
            image.src = "http://2.bp.blogspot.com/-iS6eK4lSfi4/UJJRqbKA-VI/AAAAAAAABLA/HLxLJpCpau4/s320/Smiley-Face-2.jpg"; 
            image.style.width = "50px";  
            image.style.height = "50px"; 
        var canvas = null; 
        var context = null; 

        window.onload = init; 

        function init() {

            canvas = document.getElementById("gameSurface");
            context =canvas.getContext("2d"); 
            setInterval(draw, 1000/30); 
        } 


        function draw() {

            context.clearRect(0,0,500,500); 
            context.drawImage(image, x, y); 
            x += xDirection; 
            y += yDirection; 

            if ((x + 50) >= 500) {

                x = 450; 
                xDirection = -1; 

            }else if (x <= 0) {

                x = 0; 
                xDirection = 1; 
            } 

            if ((y + 50) >= 500) {

                y = 450; 
                yDirection = -1; 

            }else if (y <= 0) {

                y = 0; 
                yDirection = 1; 
            }
        }

ご覧のとおり、私が欲しいのは、画面上を跳ね回るスマイリー フェイスだけです。私はいつも JS に問題があるようです...そして、JQuery については何も知りません。申し訳ありません。

4

1 に答える 1

1

スタイルを設定して img 要素のサイズを変更していますが、canvas.drawImage()メソッドは要素スタイルを使用していません。ただし、追加の引数を指定すると、サイズを指定できます.drawImage() 。

context.drawImage(image, x, y, 50, 50);

デモ: http://jsfiddle.net/vz28W/

詳細については、 MDNを参照してください。

于 2013-10-26T09:23:07.470 に答える