WebGL

The WebGL module provides the graphics drawing capability, such as processing the graphics position and color.

This module provides WebGL APIs that correspond to the OpenGL ES 2.0 feature set. For more information, see WebGL™.

NOTE

The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.

WebGL complies with the OpenGL protocol and does not support multi-thread calling.

This module can be used only in the JavaScript-compatible web-like development paradigm.

Invoking Method

Create a <canvas> component in the HML file. The following is an example:

<!--xxx.hml-->
<div class="container">
    <canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas>
    <button class="btn-button" onclick="BtnDraw2D">BtnDraw2D</button>
</div>

Obtain the <canvas> component instance in the JS file. The following is an example:

// Obtain the <canvas> component instance.
const el = this.$refs.canvas1;
// Obtain the WebGL context from the <canvas> component instance.
const gl = el.getContext('webgl');
// Call the WebGL API.
gl.clearColor(0.0, 0.0, 0.0, 1.0);

Type

System capability: SystemCapability.Graphic.Graphic2D.WebGL

Table 1 Type

APIs

System capability: SystemCapability.Graphic.Graphic2D.WebGL

Table 2 APIs

WebGLContextAttributes

WebGLContextAttributes

WebGLActiveInfo

WebGLActiveInfo

WebGLShaderPrecisionFormat

WebGLShaderPrecisionFormat

WebGLRenderingContextBase

WebGLRenderingContextBase

Attributes

Methods

WebGLRenderingContextOverloads

WebGLRenderingContextOverloads