Canvas-Größe und WebGL
Dieses WebGL-Beispiel untersucht die Auswirkungen der Einstellung (oder Nicht-Einstellung) der Leinwandgröße auf ihre Elementgröße in CSS-Pixeln, wie sie im Browserfenster erscheint.
Auswirkungen der Leinwandgröße auf das Rendering mit WebGL
Mit scissor() und clear() können wir demonstrieren, wie der WebGL-Zeichnungspuffer durch die Größe der Leinwand beeinflusst wird.
Die Größe der ersten Leinwand wird auf die gestaltete Element-Größe, bestimmt durch CSS, gesetzt. Dies geschieht, indem die width- und height-Eigenschaften der Leinwand auf die Werte der clientWidth- und clientHeight-Eigenschaften gesetzt werden.
Im Gegensatz dazu erfolgt für die zweite Leinwand keine solche Zuweisung. Die internen width- und height-Eigenschaften der Leinwand bleiben auf Standardwerten, die sich von der tatsächlichen Größe des Leinwand-Element im Browserfenster unterscheiden.
Der Effekt ist deutlich sichtbar, wenn man scissor() und clear() verwendet, um ein Quadrat in der Mitte der Leinwand zu zeichnen, indem man seine Position und Größe in Pixeln angibt. Bei der ersten Leinwand erhalten wir das gewünschte Ergebnis. Bei 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;
}
const [firstCanvas, secondCanvas] = document.getElementsByTagName("canvas");
firstCanvas.width = firstCanvas.clientWidth;
firstCanvas.height = firstCanvas.clientHeight;
[firstCanvas, secondCanvas].forEach((canvas) => {
const gl = canvas.getContext("webgl");
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);
});
Der Quellcode dieses Beispiels ist auch auf GitHub verfügbar.