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

Ajuster parfaitement un canevas HTML5 dans une fenêtre de navigateur

Lors du redimensionnement d'une page, des éléments tels que

peuvent être mis à l'échelle de manière transparente en définissant leurs propriétés de hauteur et de largeur à 100 %. Cependant, la même chose s'applique-t-elle à un élément ?

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>

2. CSS:

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

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

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!

JavaScript html5 css html define for function this canvas

Déclaration：

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