WebGLRenderingContext: viewport() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die WebGLRenderingContext.viewport()-Methode der WebGL-API legt den Viewport fest, der die affine Transformation von x und y von normalisierten Gerätekoordinaten zu Fensterkoordinaten spezifiziert.

Syntax

js
viewport(x, y, width, height)

Parameter

x

Ein GLint, der die horizontale Koordinate für die linke untere Ecke des Viewport-Ursprungs angibt. Standardwert: 0.

y

Ein GLint, der die vertikale Koordinate für die linke untere Ecke des Viewport-Ursprungs angibt. Standardwert: 0.

width

Ein nicht-negativer GLsizei, der die Breite des Viewports angibt. Standardwert: Breite des Canvas.

height

Ein nicht-negativer GLsizei, der die Höhe des Viewports angibt. Standardwert: Höhe des Canvas.

Rückgabewert

Kein (undefined).

Ausnahmen

Falls entweder width oder height einen negativen Wert hat, wird ein gl.INVALID_VALUE-Fehler geworfen.

Beispiele

Wenn Sie zuerst einen WebGL-Kontext erstellen, entspricht die Größe des Viewports der Größe des Canvas. Wenn Sie jedoch die Größe des Canvas ändern, müssen Sie dem WebGL-Kontext eine neue Viewport-Einstellung mitteilen. In dieser Situation können Sie gl.viewport verwenden.

js
gl.viewport(0, 0, canvas.width, canvas.height);

Die Breite und Höhe des Viewports werden auf einen bereichsabhängigen Wert begrenzt, der von der Implementierung abhängt. Um diesen Bereich zu erhalten, können Sie die Konstante MAX_VIEWPORT_DIMS verwenden, die ein Int32Array zurückgibt.

js
gl.getParameter(gl.MAX_VIEWPORT_DIMS);
// e.g. Int32Array[16384, 16384]

Um den aktuellen Viewport zu erhalten, fragen Sie die Konstante VIEWPORT ab.

js
gl.getParameter(gl.VIEWPORT);
// e.g. Int32Array[0, 0, 640, 480]

Spezifikationen

Specification
WebGL Specification
# 5.14.4

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
viewport

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch