为什么JavaScript没有调整图片大小？

我想在JavaScript中做一个简单的动画示例。然而，我有一个图像，我已经尝试了我在互联网上发现的所有内容，并在以前的帖子和所有内容中看到过，但我无法弄清楚为什么此图像不会调整大小。有人能告诉我问题是什么吗？为什么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，对不起。

来源

2013-10-26 TryCatch

您正在通过设置其样式来调整img元素的大小，但画布.drawImage()方法不使用元素样式。然而.drawImage()不让你指定的大小，如果你提供其他参数：

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

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

详情请参阅MDN。

来源

2013-10-26 09:23:07 nnnnnn

为什么JavaScript没有调整图片大小？

回答

相关问题