Redimensionnement de la toile, où est le problème?

Question

Je vais poster un lien depuis Theres à beaucoup à poster ici:

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

Mon but est de rendre l'ajustement de l'image dans la fenêtre avec la largeur de l'image est la même que la fenêtre, même après redimensionnement. Si la hauteur des images devient trop grande pour la fenêtre, l'image doit se redimensionner en fonction de la hauteur et non de la largeur.

Quelque part le long de mon code il y a quelque chose de mal .. me pardonner si cela est stupide, je suis encore à apprendre ..

Merci! Pour autant que je sache,

Answer 1

Je pense que c'est le comportement que vous essayez d'atteindre. Je l'ai refactorisé, il suffit donc de créer un objet Image (et j'ai changé les noms des variables en anglais pour que je puisse suivre le code plus facilement). J'espère que le code fonctionne bien. N'hésitez pas à demander dans les commentaires si vous avez des questions à ce sujet. La propriété body onload devra être remplacée par "setupBackground();" au lieu de "draw();" pour fonctionner avec ce code.

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

Vous voulez seulement faire un appel à getContext(). Cependant, je n'ai pas vraiment analysé le code après ce point.