Question

我想在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一无所知，抱歉。

Answer 1

您通过设置其样式来调整img元素的大小，但canvas .drawImage()方法不使用元素样式。但是，如果您提供其他参数，.drawImage() 允许您指定大小：

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

演示：http://jsfiddle.net/vz28W/

有关详细信息，请参阅MDN。

为什么JavaScript没有调整此图像的大小？

1 个答案: