2010-12-14 61 views
1

J'ai une simple page html5 avec un élément de canevas à une certaine taille. maintenant je veux que l'élément de toile s'échelonne toujours avec la taille disponible de la page mais garde toujours un certain rapport d'aspect.mise à l'échelle d'un élément de canevas et maintien du rapport d'aspect

comment puis-je obtenir le facteur d'échelle actuel de l'élément de canevas dans le code javascript?

merci!

Répondre

16

Si w est votre largeur et h votre taille. w/h est votre ratio.

Maintenant, la largeur de votre page est plus grande ou plus petite. Supposons que votre nouveau nom de largeur soit newW. Et vous cherchez newH.

Pour garder votre ratio, faites juste le calcul: nouveauH = newW/(w/h);

Pour obtenir votre largeur et la hauteur il suffit d'utiliser un document.getElementById (« toile »). Largeur/hauteur

+0

La technique fonctionne parfaitement, donc cette réponse méritait vraiment d'être acceptée. – adriandz

0

Cela devrait fonctionner

canvas { 
outline: 0px; 
position: absolute; 
left: 0px; 
top: 0px; 
width: 100%; 
height: auto; 
} 

L'essentiel est ici que la hauteur ajuste automatiquement quel que soit le format de l'élément canvas.