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

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...
}

CSS :

html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}

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!

JavaScript html5 css html while function this padding canvas issue

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