A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/de/docs/Web/API/WebGL_API/By_example/Canvas_size_and_WebGL below:

Canvas-Größe und WebGL - Web-APIs

Mit scissor() und clear() können wir demonstrieren, wie der WebGL-Zeichnungsbuffer von der Größe der Canvas beeinflusst wird.

Die Größe der ersten Canvas wird auf die gestylte Größe des Elements festgelegt, die durch CSS bestimmt wird. Dies erfolgt, indem die width- und height-Eigenschaften der Canvas auf die Werte der clientWidth- und clientHeight-Eigenschaften gesetzt werden.

Im Gegensatz dazu wird für die zweite Canvas keine solche Zuweisung vorgenommen. Die internen width- und height-Eigenschaften der Canvas bleiben auf den Standardwerten, die sich von der tatsächlichen Größe des Canvas-Elements im Browserfenster unterscheiden.

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

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

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4