爲什麼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沒有調整圖片大小？

回答

相關問題