communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Comment faire en sorte qu'un élément HTML5 Canvas s'adapte à toute la fenêtre ?

Comment faire en sorte qu'un élément HTML5 Canvas s'adapte à toute la fenêtre ?

Mary-Kate Olsen
Libérer： 2024-11-04 02:50:30
original
313 Les gens l'ont consulté

How to Make an HTML5 Canvas Element Fit the Entire Window?

Redimensionner le canevas pour l'adapter à la fenêtre

Problème :

Bien que vous puissiez facilement mettre à l'échelle un fichier

pour s'adapter à l'espace disponible en définissant sa hauteur et sa largeur à 100 %, en mettant à l'échelle un élément HTML5 L'élément semble être une énigme.

Solution :

Pour résoudre ce problème avec élégance et garantir que l'élément canevas est conforme aux dimensions de la fenêtre, envisagez l'approche suivante :

JavaScript :

/* Essential for aligning elements relative to the canvas' current proportions. */
function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}
Copier après la connexion

CSS :

html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}
Copier après la connexion

Détails de mise en œuvre :

  • La fonction JavaScript définit dynamiquement les propriétés de largeur et de hauteur de l'élément canevas pour qu'elles correspondent aux dimensions de la fenêtre.
  • Les règles CSS suppriment toute marge ou tout remplissage autour de l'élément et éléments, permettant au canevas de s'étendre complètement.

Cette solution s'est avérée performante et visuellement satisfaisante, permettant à vos éléments de canevas de s'adapter parfaitement à leur environnement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source：php.cn
Article précédent：Devriez-vous utiliser les attributs « type » et « langage » dans les balises de script HTML ? Article suivant：Comment ouvrir une URL dans une nouvelle fenêtre avec JavaScript : un guide complet
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2207
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2360
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1974
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1859
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1924
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal