Je répondrai à la question plus générale de savoir comment faire adapter dynamiquement la taille d'un canevas lors du redimensionnement de la fenêtre. La réponse acceptée gère de manière appropriée le cas où la largeur et la hauteur sont toutes deux supposées être de 100%, ce qui a été demandé, mais qui modifiera également le rapport hauteur / largeur de la toile. De nombreux utilisateurs voudront que le canevas soit redimensionné lors du redimensionnement de la fenêtre, mais tout en conservant le rapport hauteur / largeur intact. Ce n'est pas la question exacte, mais elle «s'intègre», mettant simplement la question dans un contexte un peu plus général.
La fenêtre aura un certain rapport hauteur / largeur (largeur / hauteur), tout comme l'objet canevas. Vous devez être clair sur la manière dont vous voulez que ces deux rapports d'aspect se rapportent l'un à l'autre. Il n'y a pas de réponse unique à cette question - je vais passer en revue certains cas courants de ce que vous pourriez vouloir.
La chose la plus importante sur laquelle vous devez être clair: l'objet canevas html a un attribut width et un attribut height; puis, le css du même objet a également un attribut width et height. Ces deux largeurs et hauteurs sont différentes, les deux sont utiles pour des choses différentes.
Changer les attributs de largeur et de hauteur est une méthode avec laquelle vous pouvez toujours changer la taille de votre toile, mais vous devrez alors tout repeindre, ce qui prendra du temps et n'est pas toujours nécessaire, car vous pouvez effectuer un certain changement de taille. via les attributs css, auquel cas vous ne redessinez pas le canevas.
Je vois 4 cas de ce que vous pourriez vouloir se produire lors du redimensionnement de la fenêtre (tous commençant par une toile en plein écran)
1: vous voulez que la largeur reste à 100% et que le rapport hauteur / largeur reste tel qu'il était. Dans ce cas, vous n'avez pas besoin de redessiner le canevas; vous n'avez même pas besoin d'un gestionnaire de redimensionnement de fenêtre. Tout ce dont tu as besoin c'est
$(ctx.canvas).css("width", "100%");
où ctx est votre contexte de canevas. violon: resizeByWidth
2: vous voulez que la largeur et la hauteur restent toutes les deux à 100%, et vous voulez que le changement de rapport hauteur / largeur qui en résulte ait l'effet d'une image étirée. Désormais, vous n'avez toujours pas besoin de redessiner le canevas, mais vous avez besoin d'un gestionnaire de redimensionnement de fenêtre. Dans le gestionnaire, vous faites
$(ctx.canvas).css("height", window.innerHeight);
violon: messWithAspectratio
3: vous voulez que la largeur et la hauteur restent toutes les deux à 100%, mais la réponse au changement de rapport hauteur / largeur est quelque chose de différent de l'étirement de l'image. Ensuite, vous devez redessiner et le faire comme indiqué dans la réponse acceptée.
violon: redessiner
4: vous voulez que la largeur et la hauteur soient de 100% au chargement de la page, mais restent constantes par la suite (pas de réaction au redimensionnement de la fenêtre.
violon: fixe
Tous les violons ont un code identique, sauf pour la ligne 63 où le mode est défini. Vous pouvez également copier le code de violon à exécuter sur votre machine locale, auquel cas vous pouvez sélectionner le mode via un argument de chaîne de requête, comme? Mode = redraw