Gibt es eine Möglichkeit, die HTML5 -Leinwand dynamisch zu erweitern, ohne zu klären, was darauf gezogen wird?

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

  •  18-09-2019
  •  | 
  •  

Frage

sehen Dies

Wenn die Ausgabe den unteren Teil der Seite erreicht, möchte ich, dass sich die Leinwand automatisch so erstreckt, dass sie weitergehen kann. Ich habe versucht, die Eigenschaft von Canvas. -Height festzulegen, aber es löscht das Fenster. Gibt es eine Möglichkeit, dies zu tun?

War es hilfreich?

Lösung

Was ich mache:
Erstellen Sie Dummy -Leinwand mit gleicher Größe wie Ihre Leinwand. 

dummyCanvas.getContext('2d').drawImage(yourCanvas, 0, 0);
newCanvas = recreate(yourCanvas);
newCanvas.getContext('2d').drawImage(dummyCanvas);

Nicht sehr hübsch, insbesondere in Ihrer Situation, in der Sie die Leinwand 50+ Mal pro Sekunde nachbauen müssen ... Interesse an anderen Antworten ... es funktioniert für mich, weil ich nur die Größe der Leinwand bei der Clientbreite/ClientHeight ändert [Fenster [Fenster .onResize

Andere Tipps

Ich weiß jedoch, dass dies jetzt irgendwie alt ist:

Sie müssen die Leinwand nicht neu erstellen, wie Itzwarty erklärt. Du kannst das:

<html>...
  <canvas id="canvas"></canvas>
  <canvas id="buffer" style="display:none;"></canvas>
  ...
</html>

Dann wäre dies Ihr JavaScript:

var canvas = document.getElementById('canvas');
var buffer = document.getElementById('buffer');
window.onresize = function(event) {
    var w = $(window).width(); //Using jQuery for easy multi browser support.
    var h = $(window).height();
    buffer.width = w;
    buffer.height = h;
    buffer.getContext('2d').drawImage(canvas, 0, 0);
    canvas.width = w;
    canvas.height = h;
    canvas.getContext('2d').drawImage(buffer, 0, 0);
}

Hier ändern Sie nur die Größe der Leinwände und kopieren über das Bild. Ich bin mir nicht sicher, aber ich glaube, die Leistung ist etwas besser und es ist meiner Meinung nach einfacher und einfacher zu verstehen.

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