Wie passt man ein HTML5-Canvas-Element an das gesamte Fenster an?

Leinwandgröße an Fenstergröße anpassen

Problem:

Während Sie ein

Element an den verfügbaren Platz anpassen, indem Sie seine Höhe und Breite auf 100 % festlegen und ein HTML5--Element skalieren. Element scheint ein Rätsel zu sein.

Lösung:

Um dieses Problem elegant zu lösen und sicherzustellen, dass das Canvas-Element den Abmessungen des Fensters entspricht, sollten Sie den folgenden Ansatz in Betracht ziehen:

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

Implementierungsdetails:

• Die JavaScript-Funktion stellt die Breiten- und Höheneigenschaften des Canvas-Elements dynamisch so ein, dass sie den Abmessungen des Fensters entsprechen.
• Die CSS-Regeln entfernen alle Ränder oder Abstände um das und Elemente, sodass sich die Leinwand vollständig ausdehnen kann.

Diese Lösung hat sich als leistungsstark und optisch zufriedenstellend erwiesen und ermöglicht es Ihren Leinwandelementen, sich nahtlos an ihre Umgebung anzupassen.

Das obige ist der detaillierte Inhalt vonWie passt man ein HTML5-Canvas-Element an das gesamte Fenster an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html5 css html while function this padding canvas issue

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn