크기 조정 캔버스, 어디에서 문제가 있습니까?

Question

내가 훨씬에 프로그래머가 여기에 게시 할 수 있기 때문에 링크를 게시합니다 :

http://hem.bredband.net/noor/canvas.htm

내 목표는 윈도우와 같은되는 이미지의 폭과 창 내부 사진 맞게하는 것입니다

도 크기를 조정 한 후 창에 그림 높이가 커지면 그림의 너비가 아니라 높이에 따라 크기가 조정됩니다.

어딘가에 내 코드를 따라 뭔가 문제가있다 ..이 바보 경우, 난 아직 ..

감사를 배우고 용서!

Answer 1

저는 이것이 당신이 성취하려고하는 행동이라고 생각합니다. 나는 당신이 단지 하나의 Image 객체를 생성 할 필요가 있도록 (그리고 코드를 더 쉽게 따라갈 수 있도록 변수 이름을 영어로 변경해야하기 때문에) 그것을 리팩토링했다. 바라건대 코드가 어떻게 작동하는지 분명하다. 의견이 있으시면 언제든지 문의하십시오. 이 코드를 사용하려면 body onload 속성을 "draw();" 대신 "setupBackground();"으로 변경해야합니다.

function setupBackground() { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 

    function draw() { 
     canvas.width = 0; 
     canvas.height = 0; 
     var divHeight = div.scrollHeight; 
     var divWidth = div.scrollWidth; 
     var yScale = divHeight/img.height; 
     var xScale = divWidth/img.width; 

     var newImgHeight = img.height * xScale; 
     var newImgWidth = divWidth; 

     if (divHeight >= newImgHeight) { 
      newImgHeight = divHeight; 
      newImgWidth = img.width * yScale; 
     } 

     canvas.width = divWidth; 
     canvas.height = divHeight; 
     ctx.drawImage(img,0,0,newImgWidth,newImgHeight); 
    } 

    var img = new Image(); 
    img.onload = function() { 
     window.onresize = draw; 
     draw(); 
    } 
    img.src = 'ad.jpg'; 
}; 

Answer 2

내가 아는 한. getContext()를 한 번만 호출하면됩니다. 나는이 시점을 지나서 코드를 분석하지 못했습니다.