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 回答