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?

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

<canvas id="canvas"></canvas>

JavaScript

(function() {
    var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d');

    // resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            /**
             * Your drawings need to be inside this function otherwise they will be reset when 
             * you resize the browser window and the canvas goes will be cleared.
             */
            drawStuff(); 
    }
    resizeCanvas();

    function drawStuff() {
            // do your drawing stuff here
    }
})();

CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas { display:block; } /* To remove the scrollbars */

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.

Sie können Ansichtsfenstereinheiten (CSS3) ausprobieren :

canvas { 
  height: 100vh; 
  width: 100vw; 
  display: block;
}

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

$(ctx.canvas).css("width", "100%");

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

$(ctx.canvas).css("height", window.innerHeight);

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

http://jsfiddle.net/mqFdk/10/

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

mit CSS

body { 
       margin: 0; 
       padding: 0
     }
#c { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     overflow: hidden
   }

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:

function resize() {
  var width = gl.canvas.clientWidth;
  var height = gl.canvas.clientHeight;
  if (gl.canvas.width != width ||
      gl.canvas.height != height) {
     gl.canvas.width = width;
     gl.canvas.height = height;
     return true;
  }
  return false;
}

var needToRender = true;  // draw at least once
function checkRender() {
   if (resize() || needToRender) {
     needToRender = false;
     drawStuff();
   }
   requestAnimationFrame(checkRender);
}
checkRender();

(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/

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

CSS:

body { 
       margin: 0; 
       padding: 0
     }
#c { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     overflow: hidden
   }

Javascript:

function redraw() {
    var cc = c.getContext("2d");
    c.width = c.clientWidth;
    c.height = c.clientHeight;
    cc.scale(c.width, c.height);

    // Draw a circle filling the canvas.
    cc.beginPath();
    cc.arc(0.5, 0.5, .5, 0, 2*Math.PI);
    cc.fill();
}

// update on any window size change.
window.addEventListener("resize", redraw);

// first draw
redraw();

Für Handys ist es besser, es zu benutzen

canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;

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