Pouvez-vous redimensionner un canevas HTML5 de manière transparente avec la fenêtre du navigateur ?

La solution : mise à l'échelle automatique avec CSS et JavaScript

La clé réside dans une combinaison de CSS et JavaScript :

1. JavaScript :

   • Dans votre fonction de dessin, ajustez la valeur largeur et hauteur pour correspondre aux dimensions actuelles de la fenêtre :

     <code class="javascript">function draw() {
       var ctx = (your canvas context);
       ctx.canvas.width = window.innerWidth;
       ctx.canvas.height = window.innerHeight;
       // Drawing code here...
     }</code>

     Copier après la connexion

2. CSS:

   • Définir le CSS pour le et son conteneur :

     <code class="css">html, body {
       width: 100%;
       height: 100%;
       margin: 0;
     }</code>

     Copier après la connexion

En définissant les éléments HTML et body sur toute la largeur et la hauteur, le est contraint de s’adapter à la fenêtre. Le script ajuste sa taille de manière dynamique pour garantir un ajustement parfait à tout moment.

Cette solution s'est avérée avoir un impact minimal sur les performances, ce qui en fait un moyen efficace de créer des canevas redimensionnables.

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!