Изменение размера холста, в чем проблема?

Question

я выложу ссылку, так как Тереза ​​на много пост здесь:

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

Моя цель состоит в том, чтобы сделать изображение прилегание внутри окна с шириной изображения такое же, как окно, даже после изменения размера. Если высота изображения становится большой для окна, тогда изображение должно изменить размер в соответствии с высотой, а не шириной.

Где-то мой код есть что-то неправильно .. простите меня, если это глупо, я все еще учусь ..

Спасибо!

Answer 1

Я думаю, что это поведение, которое вы пытаетесь достичь. Я реорганизовал его, поэтому вам нужно создать только один объект Image (и изменил имена переменных на английский, чтобы я мог лучше следовать коду). Надеюсь, это ясно, как работает код. Не стесняйтесь спрашивать в комментариях, если у вас есть какие-либо вопросы по этому поводу. Чтобы работать с этим кодом, свойство bodyload необходимо изменить на "setupBackground();" вместо "draw();".

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(). Тем не менее, я действительно не очень анализировал код.