Mise à l'échelle HTML5 canvas largeur de la préservation de w/h ratio d'aspect
J'ai un élément canvas avec des dimensions de 979X482px et j'aimerais avoir à s'étirer pour s'adapter à la largeur de la fenêtre du navigateur, en gardant l'aspect ratio de la largeur/hauteur de 1 à 1, je veux la hauteur de l'échelle, par rapport à la largeur de la toile. Toutes les suggestions sur les façons d'aller à ce sujet avec javascript/jQuery?
Calculer les nouvelles valeurs de largeur et de hauteur et de les appliquer via jquery/javascript. Il y a des tonnes d'informations sur la façon de calc dimensions en gardant les proportions. Avez-vous essayé quelque chose de vous-même? Un code vous rencontrez des problèmes avec, peut-être?
OriginalL'auteur dcd0181 | 2012-05-25
Vous devez vous connecter pour publier un commentaire.
D'abord, vous définissez la largeur de la toile à 100%
ensuite mettre à jour sa hauteur de base sur la largeur
2.031 = 979/482
Mais vous ne devez pas vous attacher à $(window).redimensionner comme moi... c'est un mauvais comportement,
$('#canvas').height($('canvas').width() / 2.031);
être$('#canvas').height($('#canvas').width() / 2.031);
, en notant le ID?Oui, j'ai oublié de mettre le #toile
Cela entraînera le contenu à être floue. Vous avez besoin de manipuler la toile contexte que l'autre réponse unis.
Vous devez définir les éléments de canevas à hauteur / largeur attributs de ne pas les attributs CSS et redessiné la toile.
OriginalL'auteur Trinh Hoang Nhu
ou une certaine variation.
ctx
est le contexte. Une instruction if pour les cas limites peuvent être nécessaires!OriginalL'auteur
Toutes les réponses précédentes sont grands, mais ils ne sont pas à l'échelle toutes les images tirées sur la toile proportionnellement avec la nouvelle taille du canevas. Si vous êtes à l'aide de la cinétique, j'ai fait une fonction ici = http://www.andy-howard.com/how-to-resize-kinetic-canvas-and-maintain-the-aspect-ratio/
OriginalL'auteur Andrew Junior Howard
Je jouais autour depuis un certain temps moi-même. Le concept tourne autour de savoir la largeur de la toile. Vous devez également vous assurer que tous vos toile actifs également utiliser des calculs pour l'affichage dépend du navigateur. J'ai documenté mon code, j'espère que cela aide,
OriginalL'auteur Sabba Keynejad
Essayer cette
Ce n'est PAS définie de l'échelle, il suffit simplement de définir la toile de la taille de la fenêtre de largeur et hauteur de la fenêtre.
OriginalL'auteur mehmood