Mise à l'échelle de canvas html5 sans spécifier les dimensions

Question

Je viens de commencer à travailler avec l'élément canvas html5. J'utilise les derniers navigateurs firefox et chrome. Et jusqu'à présent, ils sont . Ce que j'essaye de réaliser est la mise à l'échelle d'une image sans avoir à spécifier les tailles de dessin d'image ou de toile. Je voudrais que le canevas remplisse la fenêtre du navigateur, et que l'image remplisse le canevas sans en spécifiant des tailles. Et pour réajuster toile et son image sur le vol lorsque l'utilisateur ajuste le cadre du navigateur.

La photo que j'ai testée est 4284x2844.

J'ai réussi à obtenir une mise à l'échelle dynamique, mais il y a un problème ... Si je ne spécifie pas les tailles, l'image devient floue.

Ceci est ma première question de stackoverflow et je n'ai pas conquis le formatage . Alors, s'il vous plaît jeter un oeil à la petite quantité de code sur à pastebin:

http://pastebin.com/88faqJUx

Merci pour votre aide.

J'ai trouvé la solution ...

L'ajout de deux lignes, sans autre changement, a fait l'affaire, mais à ce stade, je ne sais pas exactement pourquoi il a été un échec, mais bien heureux de se déplacer sur ...

<canvas id="taba_main_canvas"> 
Your browser does not support the canvas element. 
</ canvas> 

<script type="text/javascript"> 
    var main_canvas=document.getElementById("taba_main_canvas"); 
    var cxt=main_canvas.getContext("2d"); 


    // adding these next two lines solved the blurriness issues   

    //Set the canvas width to the same as the browser 
    main_canvas.width = window.innerWidth; 
    main_canvas.height = window.innerHeight; 


    var img=new Image(); 
    <!-- mansion pic 4284x2844 --> 
    img.src="images/mansion_3344.png"; 

    img.onload = function() 
    { 
     <!-- use the graphics full size and scale the canvas in css --> 
     cxt.drawImage(img,0,0,main_canvas.width,main_canvas.height); 

    } 

</script> 

juste un tout petit problème, la taille verticale de l'image est apparemment seulement quelques lignes plus grand que la toile et si je reçois une barre de défilement vertical a. Faire glisser la fenêtre du navigateur plus haut, qui normalement éliminerait la barre de défilement verticale n'a aucun effet. J'ai essayé de manipuler la toile ou la hauteur de l'image dans le code, mais cela n'a rien changé.

Encore, avoir l'image propre est une grande victoire. Je continue pour le moment et je reviendrai sur ce point plus tard.

Answer 1

L'autre façon de faire est de verrouiller sur le document onresize événement et redimensionner le canevas en utilisant window.innerWidth et window.innerHeight ou une telle chose. Je l'ai utilisé de cette façon moi-même, mais c'était pour quelque chose dont je me foutais de la prise en charge IE - voir W3C DOM Compatibility - CSS Object Model View à quirksmode pour plus d'informations sur le support du navigateur. Notez également que la largeur de la barre de défilement est inclus dans innerWidth et innerHeight; Si votre page doit être défilée, vous pouvez faire quelque chose comme soustraire 20 et remplir l'élément contenant avec une couleur d'arrière-plan appropriée.

Je présume que vous n'essayez pas seulement de dessiner une image - si vous faisiez juste cela, <img> serait un bien meilleur match.

Modifier: jQuery a $(document).width(); et $(document).height(); qui semblent obtenir les bons chiffres.Une autre édition: en réalité, ils ont tort; ils sont la largeur et la hauteur du document, pas la largeur et la hauteur de la fenêtre, donc je pense que innerWidth et innerHeight peuvent être tout ce qu'il y a.