Ich versuche, ein Canvas-Element zu erstellen, das 100% der Breite und Höhe des Ansichtsfensters einnimmt.
Sie können in meinem Beispiel hier sehen, dass dies geschieht, jedoch werden Bildlaufleisten sowohl in Chrome als auch in FireFox hinzugefügt. Wie kann ich die zusätzlichen Bildlaufleisten verhindern und genau die Breite und Höhe des Fensters angeben, die der Größe der Leinwand entspricht?
Antworten:
Damit die Leinwand immer die volle Breite und Höhe des Bildschirms erreicht, dh auch wenn die Größe des Browsers geändert wird, müssen Sie Ihre Zeichenschleife in einer Funktion ausführen, die die Größe der Leinwand auf window.innerHeight und window.innerWidth ändert.
Beispiel: http://jsfiddle.net/jaredwilli/qFuDr/
HTML
JavaScript
CSS
Auf diese Weise können Sie die Leinwand in voller Breite und Höhe des Browsers richtig gestalten. Sie müssen nur den gesamten Code zum Zeichnen in die Zeichenfläche in der Funktion drawStuff () einfügen.
quelle
debounce
die Größe ändern, da sonst der Browser überflutet wird.display: block
: Dadurch werden nicht nur Bildlaufleisten entfernt, sondern auch 2 Pixel aus der Höhe des Dokumentenkörpers entfernt, die normalerweise unter Textzeilen innerhalb eines Blocks hinzugefügt werden. Also +1 dafürSie können Ansichtsfenstereinheiten (CSS3) ausprobieren :
quelle
display: block;
und es macht den Job.Ich beantworte die allgemeinere Frage, wie sich die Größe einer Leinwand beim Ändern der Fenstergröße dynamisch anpassen lässt. Die akzeptierte Antwort behandelt den Fall angemessen, in dem sowohl Breite als auch Höhe 100% betragen sollen, was verlangt wurde, aber auch das Seitenverhältnis der Leinwand ändert. Viele Benutzer möchten, dass die Größe der Leinwand beim Ändern der Fenstergröße geändert wird, wobei das Seitenverhältnis jedoch unberührt bleibt. Es ist nicht die genaue Frage, aber es "passt", nur um die Frage in einen etwas allgemeineren Kontext zu stellen.
Das Fenster hat ein gewisses Seitenverhältnis (Breite / Höhe), ebenso wie das Canvas-Objekt. Wie Sie möchten, dass sich diese beiden Seitenverhältnisse zueinander verhalten, ist eine Sache, über die Sie sich klar sein müssen. Es gibt keine Antwort auf diese Frage "Eine Größe passt für alle" - ich werde einige häufige Fälle von dem durchgehen, was Sie könnten wollen.
Das Wichtigste, worüber Sie sich im Klaren sein müssen: Das HTML-Canvas-Objekt verfügt über ein width-Attribut und ein height-Attribut. und dann hat das CSS desselben Objekts auch ein Attribut width und height. Diese beiden Breiten und Höhen sind unterschiedlich, beide sind für verschiedene Dinge nützlich.
Das Ändern der Attribute für Breite und Höhe ist eine Methode, mit der Sie jederzeit die Größe Ihrer Leinwand ändern können. Dann müssen Sie jedoch alles neu streichen. Dies ist zeitaufwändig und nicht immer erforderlich, da Sie einige Größenänderungen vornehmen können In diesem Fall zeichnen Sie die Zeichenfläche nicht neu.
Ich sehe 4 Fälle, in denen Sie möglicherweise die Fenstergröße ändern möchten (alle beginnen mit einer Vollbild-Leinwand).
1: Sie möchten, dass die Breite 100% bleibt und das Seitenverhältnis unverändert bleibt. In diesem Fall müssen Sie die Leinwand nicht neu zeichnen. Sie benötigen nicht einmal einen Handler zur Größenänderung von Fenstern. Alles was Sie brauchen ist
Dabei ist ctx Ihr Canvas-Kontext. Geige: resizeByWidth
2: Sie möchten, dass sowohl Breite als auch Höhe 100% bleiben, und Sie möchten, dass die resultierende Änderung des Seitenverhältnisses den Effekt eines gestreckten Bildes hat. Jetzt müssen Sie die Leinwand immer noch nicht neu zeichnen, aber Sie benötigen einen Fensteränderungs-Handler. Im Handler tun Sie das
Geige: messWithAspectratio
3: Sie möchten, dass sowohl Breite als auch Höhe 100% bleiben, aber die Antwort auf die Änderung des Seitenverhältnisses unterscheidet sich von der Dehnung des Bildes. Dann müssen Sie neu zeichnen und es so machen, wie es in der akzeptierten Antwort beschrieben ist.
Geige: neu zeichnen
4: Sie möchten, dass Breite und Höhe beim Laden der Seite 100% betragen, danach jedoch konstant bleiben (keine Reaktion auf die Größenänderung des Fensters.
Geige: behoben
Alle Geigen haben den gleichen Code, mit Ausnahme der Zeile 63, in der der Modus eingestellt ist. Sie können auch den Geigencode kopieren, der auf Ihrem lokalen Computer ausgeführt werden soll. In diesem Fall können Sie den Modus über ein Querystring-Argument als? Mode = redraw auswählen
quelle
$(ctx.canvas).css("width", "100%");
ist äquivalent zu$(canvas).css("width", "100%");
(die Leinwand des Kontexts ist nur die Leinwand)ctx.canvas
ist viel kürzer alscanvas.getContext('2d')
- deshalb mache ich 2). Daher gibt es keine Variable namens canvas, aber ctx.canvas. Von dort kommt ctx.canvas.http://jsfiddle.net/mqFdk/10/
mit CSS
quelle
Ich suchte auch nach einer Antwort auf diese Frage, aber die akzeptierte Antwort brach für mich. Anscheinend ist die Verwendung von window.innerWidth nicht portabel. Es funktioniert in einigen Browsern, aber ich habe festgestellt, dass es Firefox nicht gefallen hat.
Gregg Tavares hat hier eine großartige Ressource veröffentlicht, die dieses Problem direkt anspricht: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (Siehe Anti-Pattern # 3 und 4).
Die Verwendung von canvas.clientWidth anstelle von window.innerWidth scheint gut zu funktionieren.
Hier ist Greggs vorgeschlagene Render-Schleife:
quelle
(Erweiterung der Antwort von 動靜 能量)
Gestalte die Leinwand, um den Körper zu füllen. Berücksichtigen Sie beim Rendern auf der Leinwand die Größe.
http://jsfiddle.net/mqFdk/356/
CSS:
Javascript:
quelle
Für Handys ist es besser, es zu benutzen
da es nach dem Ändern der Ausrichtung falsch angezeigt wird. Das „Ansichtsfenster“ wird vergrößert, wenn die Ausrichtung auf Hochformat geändert wird. Siehe vollständiges Beispiel
quelle