JavaScript가이 이미지의 크기를 조정하지 않는 이유는 무엇입니까?

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 요소의 스타일을 설정하여 크기를 조정할 수 있지만 캔버스 .drawImage() 메서드는 요소 스타일을 사용하지 않습니다.

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

데모 : http://jsfiddle.net/vz28W/

은 자세한 내용은 MDN를 참조하지만 .drawImage()는는 추가 인수를 제공하는 경우 당신은 크기를 지정할 수 없습니다.