Canvas-Größe und WebGL

Dieses WebGL-Beispiel untersucht die Auswirkungen der Einstellung (oder Nicht-Einstellung) der Canvas-Größe auf die Elementgröße in CSS-Pixeln, wie sie im Browserfenster erscheint.

Auswirkung der Canvas-Größe auf das Rendering mit WebGL

Mit scissor() und clear() können wir demonstrieren, wie der WebGL-Zeichenpuffer durch die Größe des Canvas beeinflusst wird.

Die Größe des ersten Canvas wird auf die gestylte Element-Größe gesetzt, die durch CSS bestimmt wird. Dies geschieht durch Zuweisung der width und height Eigenschaften des Canvas zu den Werten der clientWidth und clientHeight Eigenschaften, jeweils.

Im Gegensatz dazu erfolgt keine solche Zuweisung für das zweite Canvas. Die internen width und height Eigenschaften des Canvas bleiben bei den Standardwerten, die anders sind als die tatsächliche Größe des Canvas-Element im Browserfenster.

Der Effekt ist klar sichtbar, wenn scissor() und clear() verwendet werden, um ein Quadrat in der Mitte des Canvas zu zeichnen, indem seine Position und Größe in Pixeln angegeben werden. In der ersten Canvas erhalten wir das gewünschte Ergebnis. In der zweiten hat das Quadrat die falsche Form, Größe und Position.

html

<p>Compare the two canvases.</p>
<canvas>Your browser does not seem to support HTML canvas.</canvas>
<canvas>Your browser does not seem to support HTML canvas.</canvas>

css

body {
  text-align: center;
}
canvas {
  display: inline-block;
  width: 120px;
  height: 80px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}

window.addEventListener(
  "load",
  () => {
    const [firstCanvas, secondCanvas] = document.getElementsByTagName("canvas");
    firstCanvas.width = firstCanvas.clientWidth;
    firstCanvas.height = firstCanvas.clientHeight;
    [firstCanvas, secondCanvas].forEach((canvas) => {
      const gl =
        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
      if (!gl) {
        document.querySelector("p").textContent =
          "Failed. Your browser or device may not support WebGL.";
        return;
      }
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
      gl.enable(gl.SCISSOR_TEST);
      gl.scissor(30, 10, 60, 60);
      gl.clearColor(1.0, 1.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
    });
  },
  false,
);

Der Quellcode dieses Beispiels ist auch auf GitHub verfügbar.