Zwingen Sie das Canvas -Element in HTML, das gesamte Fenster aufzunehmen?

StackOverflow https://stackoverflow.com/questions/517951

  •  21-08-2019
  •  | 
  •  

Frage

Anstatt von 

<pre>
    <canvas id="theCanvas" width="500" height="500"></canvas>
</pre>

Wo ich die Größe der Leinwand ansehe, gibt es eine Möglichkeit, die Leinwand das gesamte Browserfenster aufzunehmen?

War es hilfreich?

Lösung 

<html>
  <body style="height: 100%; margin: 0;">
    <canvas style="width: 100%; height: 100%;"></canvas>
  </body>
</html>

Andere Tipps

Wenn Sie ein Canvas -Element erstellen, das den gesamten Bildschirm umfasst, möchten Sie wahrscheinlich die Ereignisse der Fenstergrößenänderung überwachen. Sie können einen prozentualen Stil verwenden, aber Sie müssen daran denken, Ihre Leinwand neu zu streichen, wenn das Fenster geändert wird. Wenn die Abmessungen eines Leinwandelements verändert werden (Breite oder Höhe), wird die Leinwand selbst gelöscht und effektiv zurückgesetzt (Ursprungsrichtlinien sind eine Ausnahme).

Ich schlage vor, Sie verwenden so etwas:

window.addEventListener(
  'resize', 
  function() { 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
    MyRepaintCallback(); 
  }, 
  false);

Es gibt mehrere Überlegungen für Ihre Repaint -Funktion über den Umfang dieser Frage hinaus. Zumindest können Sie versichert und wissen, dass doppelte Pufferung Ihre Leinwand wahrscheinlich nicht zwischen Neulackieren flackern wird.

Setzen Sie in CSS die Breite und Höhe auf 100% für HTML, Körper- (und Form, wenn ASP.NET) -Tags.

Funktioniert jedoch nicht in älteren IES.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top