HarmonyOS NEXT实战开发：WebGL2

于 2024-07-22 22:19:25 发布
阅读量589 收藏 23
点赞数 11
分类专栏： 鸿蒙 鸿蒙next版 文章标签： harmonyos 华为 android 鸿蒙 webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanyanyou/article/details/140621083
版权

WebGL2支持图形的绘制，包括对当前绘制图形的位置、颜色等进行处理，其中相对WebGL来说对渲染管道和着色语言进行了增强。

WebGL标准图形API，对应OpenGL ES 3.0特性集。

说明

本模块首批接口从API version 7开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。

WebGL2遵循OpenGL协议，不支持多线程调用。

目前该功能仅支持使用兼容JS的类Web开发范式开发。

调用方式

hml内创建canvas，示例如下：

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

js内获取canvas实例，示例如下：

// 获取canvas组件实例
const el = this.$refs.canvas1;
// 从canvas组件实例获取WebGL上下文
const gl = el.getContext('webgl2');
// 调用WebGL API
gl.clearColor(0.0, 0.0, 0.0, 1.0);

Type

系统能力： 以下各项对应的系统能力均为 SystemCapability.Graphic.Graphic2D.WebGL2。

表1 Type

名称类型
GLenumnumber
GLint64number
GLuint64number
Uint32Listarray

Interface

系统能力： 以下各项对应的系统能力均为 SystemCapability.Graphic.Graphic2D.WebGL2。

表2 Interface

名称
WebGL2RenderingContextBase
WebGL2RenderingContextOverloads
WebGLQuery
WebGLSampler
WebGLSync
WebGLTransformFeedback
WebGLVertexArrayObject

WebGL2RenderingContextBase

WebGL2RenderingContextBase

属性

名称参数类型必填
READ_BUFFERGLenum是
UNPACK_ROW_LENGTHGLenum是
UNPACK_SKIP_ROWSGLenum是
UNPACK_SKIP_PIXELSGLenum是
PACK_ROW_LENGTHGLenum是
PACK_SKIP_ROWSGLenum是
PACK_SKIP_PIXELSGLenum是
COLORGLenum是
DEPTHGLenum是
STENCILGLenum是
REDGLenum是
RGB8GLenum是
RGBA8GLenum是
RGB10_A2GLenum是
TEXTURE_BINDING_3DGLenum是
UNPACK_SKIP_IMAGESGLenum是
UNPACK_IMAGE_HEIGHTGLenum是
TEXTURE_3DGLenum是
TEXTURE_WRAP_RGLenum是
MAX_3D_TEXTURE_SIZEGLenum是
UNSIGNED_INT_2_10_10_10_REVGLenum是
MAX_ELEMENTS_VERTICESGLenum是
MAX_ELEMENTS_INDICESGLenum是
TEXTURE_MIN_LODGLenum是
TEXTURE_MAX_LODGLenum是
TEXTURE_BASE_LEVELGLenum是
TEXTURE_MAX_LEVELGLenum是
MINGLenum是
MAXGLenum是
DEPTH_COMPONENT24GLenum是
MAX_TEXTURE_LOD_BIASGLenum是
TEXTURE_COMPARE_MODEGLenum是
TEXTURE_COMPARE_FUNCGLenum是
CURRENT_QUERYGLenum是
QUERY_RESULTGLenum是
QUERY_RESULT_AVAILABLEGLenum是
STREAM_READGLenum是
STREAM_COPYGLenum是
STATIC_READGLenum是
STATIC_COPYGLenum是
DYNAMIC_READGLenum是
DYNAMIC_COPYGLenum是
MAX_DRAW_BUFFERSGLenum是
DRAW_BUFFER0GLenum是
DRAW_BUFFER1GLenum是
DRAW_BUFFER2GLenum是
DRAW_BUFFER3GLenum是
DRAW_BUFFER4GLenum是
DRAW_BUFFER5GLenum是
DRAW_BUFFER6GLenum是
DRAW_BUFFER7GLenum是
DRAW_BUFFER8GLenum是
DRAW_BUFFER9GLenum是
DRAW_BUFFER10GLenum是
DRAW_BUFFER11GLenum是
DRAW_BUFFER12GLenum是
DRAW_BUFFER13GLenum是
DRAW_BUFFER14GLenum是
DRAW_BUFFER15GLenum是
MAX_FRAGMENT_UNIFORM_COMPONENTSGLenum是
MAX_VERTEX_UNIFORM_COMPONENTSGLenum是
SAMPLER_3DGLenum是
SAMPLER_2D_SHADOWGLenum是
FRAGMENT_SHADER_DERIVATIVE_HINTGLenum是
PIXEL_PACK_BUFFERGLenum是
PIXEL_UNPACK_BUFFERGLenum是
PIXEL_PACK_BUFFER_BINDINGGLenum是
PIXEL_UNPACK_BUFFER_BINDINGGLenum是
FLOAT_MAT2x3GLenum是
FLOAT_MAT2x4GLenum是
FLOAT_MAT3x2GLenum是
FLOAT_MAT3x4GLenum是
FLOAT_MAT4x2GLenum是
FLOAT_MAT4x3GLenum是
SRGBGLenum是
SRGB8GLenum是
SRGB8_ALPHA8GLenum是
COMPARE_REF_TO_TEXTUREGLenum是
RGBA32FGLenum是
RGB32FGLenum是
RGBA16FGLenum是
RGB16FGLenum是
VERTEX_ATTRIB_ARRAY_INTEGERGLenum是
MAX_ARRAY_TEXTURE_LAYERSGLenum是
MIN_PROGRAM_TEXEL_OFFSETGLenum是
MAX_PROGRAM_TEXEL_OFFSETGLenum是
MAX_VARYING_COMPONENTSGLenum是
TEXTURE_2D_ARRAYGLenum是
TEXTURE_BINDING_2D_ARRAYGLenum是
R11F_G11F_B10FGLenum是
UNSIGNED_INT_10F_11F_11F_REVGLenum是
RGB9_E5GLenum是
UNSIGNED_INT_5_9_9_9_REVGLenum是
TRANSFORM_FEEDBACK_BUFFER_MODEGLenum是
MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTSGLenum是
TRANSFORM_FEEDBACK_VARYINGSGLenum是
TRANSFORM_FEEDBACK_BUFFER_STARTGLenum是
TRANSFORM_FEEDBACK_BUFFER_SIZEGLenum是
TRANSFORM_FEEDBACK_PRIMITIVES_WRITTENGLenum是
RASTERIZER_DISCARDGLenum是
MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTSGLenum是
MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBSGLenum是
INTERLEAVED_ATTRIBSGLenum是
SEPARATE_ATTRIBSGLenum是
TRANSFORM_FEEDBACK_BUFFERGLenum是
TRANSFORM_FEEDBACK_BUFFER_BINDINGGLenum是
RGBA32UIGLenum是
RGB32UIGLenum是
RGBA16UIGLenum是
RGB16UIGLenum是
RGBA8UIGLenum是
RGB8UIGLenum是
RGBA32IGLenum是
RGB32IGLenum是
RGBA16IGLenum是
RGB16IGLenum是
RGBA8IGLenum是
RGB8IGLenum是
RED_INTEGERGLenum是
RGB_INTEGERGLenum是
RGBA_INTEGERGLenum是
SAMPLER_2D_ARRAYGLenum是
SAMPLER_2D_ARRAY_SHADOWGLenum是
SAMPLER_CUBE_SHADOWGLenum是
UNSIGNED_INT_VEC2GLenum是
UNSIGNED_INT_VEC3GLenum是
UNSIGNED_INT_VEC4GLenum是
INT_SAMPLER_2DGLenum是
INT_SAMPLER_3DGLenum是
INT_SAMPLER_CUBEGLenum是
INT_SAMPLER_2D_ARRAYGLenum是
UNSIGNED_INT_SAMPLER_2DGLenum是
UNSIGNED_INT_SAMPLER_3DGLenum是
UNSIGNED_INT_SAMPLER_CUBEGLenum是
UNSIGNED_INT_SAMPLER_2D_ARRAYGLenum是
DEPTH_COMPONENT32FGLenum是
DEPTH32F_STENCIL8GLenum是
FLOAT_32_UNSIGNED_INT_24_8_REVGLenum是
FRAMEBUFFER_ATTACHMENT_COLOR_ENCODINGGLenum是
FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPEGLenum是
FRAMEBUFFER_ATTACHMENT_RED_SIZEGLenum是
FRAMEBUFFER_ATTACHMENT_GREEN_SIZEGLenum是
FRAMEBUFFER_ATTACHMENT_BLUE_SIZEGLenum是
FRAMEBUFFER_ATTACHMENT_ALPHA_SIZEGLenum是
FRAMEBUFFER_ATTACHMENT_DEPTH_SIZEGLenum是
FRAMEBUFFER_ATTACHMENT_STENCIL_SIZEGLenum是
FRAMEBUFFER_DEFAULTGLenum是
UNSIGNED_INT_24_8GLenum是
DEPTH24_STENCIL8GLenum是
UNSIGNED_NORMALIZEDGLenum是
DRAW_FRAMEBUFFER_BINDINGGLenum是
READ_FRAMEBUFFERGLenum是
DRAW_FRAMEBUFFERGLenum是
READ_FRAMEBUFFER_BINDINGGLenum是
RENDERBUFFER_SAMPLESGLenum是
FRAMEBUFFER_ATTACHMENT_TEXTURE_LAYERGLenum是
MAX_COLOR_ATTACHMENTSGLenum是
COLOR_ATTACHMENT1GLenum是
COLOR_ATTACHMENT2GLenum是
COLOR_ATTACHMENT3GLenum是
COLOR_ATTACHMENT4GLenum是
COLOR_ATTACHMENT5GLenum是
COLOR_ATTACHMENT6GLenum是
COLOR_ATTACHMENT7GLenum是
COLOR_ATTACHMENT8GLenum是
COLOR_ATTACHMENT9GLenum是
COLOR_ATTACHMENT10GLenum是
COLOR_ATTACHMENT11GLenum是
COLOR_ATTACHMENT12GLenum是
COLOR_ATTACHMENT13GLenum是
COLOR_ATTACHMENT14GLenum是
COLOR_ATTACHMENT15GLenum是
FRAMEBUFFER_INCOMPLETE_MULTISAMPLEGLenum是
MAX_SAMPLESGLenum是
HALF_FLOATGLenum是
RGGLenum是
RG_INTEGERGLenum是
R8GLenum是
RG8GLenum是
R16FGLenum是
R32FGLenum是
RG16FGLenum是
RG32FGLenum是
R8IGLenum是
R8UIGLenum是
R16IGLenum是
R16UIGLenum是
R32IGLenum是
R32UIGLenum是
RG8IGLenum是
RG8UIGLenum是
RG16IGLenum是
RG16UIGLenum是
RG32IGLenum是
RG32UIGLenum是
VERTEX_ARRAY_BINDINGGLenum是
R8_SNORMGLenum是
RG8_SNORMGLenum是
RGB8_SNORMGLenum是
SIGNED_NORMALIZEDGLenum是
COPY_READ_BUFFERGLenum是
COPY_WRITE_BUFFERGLenum是
COPY_READ_BUFFER_BINDINGGLenum是
COPY_WRITE_BUFFER_BINDINGGLenum是
UNIFORM_BUFFERGLenum是
UNIFORM_BUFFER_BINDINGGLenum是
UNIFORM_BUFFER_STARTGLenum是
UNIFORM_BUFFER_SIZEGLenum是
MAX_VERTEX_UNIFORM_BLOCKSGLenum是
MAX_FRAGMENT_UNIFORM_BLOCKSGLenum是
MAX_COMBINED_UNIFORM_BLOCKSGLenum是
MAX_UNIFORM_BUFFER_BINDINGSGLenum是
MAX_UNIFORM_BLOCK_SIZEGLenum是
MAX_COMBINED_VERTEX_UNIFORM_COMPONENTSGLenum是
MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTSGLenum是
UNIFORM_BUFFER_OFFSET_ALIGNMENTGLenum是
ACTIVE_UNIFORM_BLOCKSGLenum是
UNIFORM_TYPEGLenum是
UNIFORM_SIZEGLenum是
UNIFORM_BLOCK_INDEXGLenum是
UNIFORM_OFFSETGLenum是
UNIFORM_ARRAY_STRIDEGLenum是
UNIFORM_MATRIX_STRIDEGLenum是
UNIFORM_IS_ROW_MAJORGLenum是
UNIFORM_BLOCK_BINDINGGLenum是
UNIFORM_BLOCK_DATA_SIZEGLenum是
UNIFORM_BLOCK_ACTIVE_UNIFORMSGLenum是
UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICESGLenum是
UNIFORM_BLOCK_REFERENCED_BY_VERTEX_SHADERGLenum是
UNIFORM_BLOCK_REFERENCED_BY_FRAGMENT_SHADERGLenum是
INVALID_INDEXGLenum是
MAX_VERTEX_OUTPUT_COMPONENTSGLenum是
MAX_FRAGMENT_INPUT_COMPONENTSGLenum是
MAX_SERVER_WAIT_TIMEOUTGLenum是
OBJECT_TYPEGLenum是
SYNC_CONDITIONGLenum是
SYNC_STATUSGLenum是
SYNC_FLAGSGLenum是
SYNC_FENCEGLenum是
SYNC_GPU_COMMANDS_COMPLETEGLenum是
UNSIGNALEDGLenum是
SIGNALEDGLenum是
ALREADY_SIGNALEDGLenum是
TIMEOUT_EXPIREDGLenum是
CONDITION_SATISFIEDGLenum是
WAIT_FAILEDGLenum是
SYNC_FLUSH_COMMANDS_BITGLenum是
VERTEX_ATTRIB_ARRAY_DIVISORGLenum是
ANY_SAMPLES_PASSEDGLenum是
ANY_SAMPLES_PASSED_CONSERVATIVEGLenum是
SAMPLER_BINDINGGLenum是
RGB10_A2UIGLenum是
INT_2_10_10_10_REVGLenum是
TRANSFORM_FEEDBACKGLenum是
TRANSFORM_FEEDBACK_PAUSEDGLenum是
TRANSFORM_FEEDBACK_ACTIVEGLenum是
TRANSFORM_FEEDBACK_BINDINGGLenum是
TEXTURE_IMMUTABLE_FORMATGLenum是
MAX_ELEMENT_INDEXGLenum是
TEXTURE_IMMUTABLE_LEVELSGLenum是
TIMEOUT_IGNOREDGLint64是
MAX_CLIENT_WAIT_TIMEOUT_WEBGLGLenum是

方法

方法返回值类型
copyBufferSubData(readTarget: GLenum, writeTarget: GLenum, readOffset: GLintptr, writeOffset: GLintptr, size: GLsizeiptr)void
getBufferSubData(target: GLenum, srcByteOffset: GLintptr, dstBuffer: ArrayBufferView, dstOffset?: GLuint, length?: GLuint)void
blitFramebuffer(srcX0: GLint, srcY0: GLint, srcX1: GLint, srcY1: GLint, dstX0: GLint, dstY0: GLint, dstX1: GLint, dstY1: GLint, mask: GLbitfield, filter: GLenum)void
framebufferTextureLayer(target: GLenum, attachment: GLenum, texture: WebGLTexture | null, level: GLint, layer: GLint)void
invalidateFramebuffer(target: GLenum, attachments: GLenum[])void
invalidateSubFramebuffer(target: GLenum, attachments: GLenum[], x: GLint, y: GLint, width: GLsizei, height: GLsizei)void
readBuffer(src: GLenum)void
getInternalformatParameter(target: GLenum, internalformat: GLenum, pname: GLenum)any
renderbufferStorageMultisample(target: GLenum, samples: GLsizei, internalformat: GLenum, width: GLsizei, height: GLsizei)void
texStorage2D(target: GLenum, levels: GLsizei, internalformat: GLenum, width: GLsizei, height: GLsizei)void
texStorage3D(target: GLenum, levels: GLsizei, internalformat: GLenum, width: GLsizei, height: GLsizei, depth: GLsizei)void
texImage3D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, depth: GLsizei, border: GLint, format: GLenum, type: GLenum, pboOffset: GLintptr)void
texImage3D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, depth: GLsizei, border: GLint, format: GLenum, type: GLenum, source: TexImageSource)void
texImage3D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, depth: GLsizei, border: GLint, format: GLenum, type: GLenum, srcData: ArrayBufferView | null)void
texImage3D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, depth: GLsizei, border: GLint, format: GLenum, type: GLenum, srcData: ArrayBufferView, srcOffset: GLuint)void
texSubImage3D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, zoffset: GLint, width: GLsizei, height: GLsizei, depth: GLsizei, format: GLenum, type: GLenum, pboOffset: GLintptr)void
texSubImage3D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, zoffset: GLint, width: GLsizei, height: GLsizei, depth: GLsizei, format: GLenum, type: GLenum, source: TexImageSource)void
texSubImage3D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, zoffset: GLint, width: GLsizei, height: GLsizei, depth: GLsizei, format: GLenum, type: GLenum, srcData: ArrayBufferView | null, srcOffset?: GLuint)void
copyTexSubImage3D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, zoffset: GLint, x: GLint, y: GLint, width: GLsizei, height: GLsizei)void
compressedTexImage3D(target: GLenum, level: GLint, internalformat: GLenum, width: GLsizei, height: GLsizei, depth: GLsizei, border: GLint, imageSize: GLsizei, offset: GLintptr)void
compressedTexImage3D(target: GLenum, level: GLint, internalformat: GLenum, width: GLsizei, height: GLsizei, depth: GLsizei, border: GLint, srcData: ArrayBufferView, srcOffset?: GLuint, srcLengthOverride?: GLuint)void
compressedTexSubImage3D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, zoffset: GLint, width: GLsizei, height: GLsizei, depth: GLsizei, format: GLenum, imageSize: GLsizei, offset: GLintptr)void
compressedTexSubImage3D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, zoffset: GLint, width: GLsizei, height: GLsizei, depth: GLsizei, format: GLenum, srcData: ArrayBufferView, srcOffset?: GLuint, srcLengthOverride?: GLuint)void
getFragDataLocation(program: WebGLProgram, name: string)GLint
uniform1ui(location: WebGLUniformLocation | null, v0: GLuint)void
uniform2ui(location: WebGLUniformLocation | null, v0: GLuint, v1: GLuint)void
uniform3ui(location: WebGLUniformLocation | null, v0: GLuint, v1: GLuint, v2: GLuint)void
uniform4ui(location: WebGLUniformLocation | null, v0: GLuint, v1: GLuint, v2: GLuint, v3: GLuint)void
uniform1uiv(location: WebGLUniformLocation | null, data: Uint32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniform2uiv(location: WebGLUniformLocation | null, data: Uint32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniform3uiv(location: WebGLUniformLocation | null, data: Uint32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniform4uiv(location: WebGLUniformLocation | null, data: Uint32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniformMatrix3x2fv(location: WebGLUniformLocation | null, transpose: GLboolean, data: Float32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniformMatrix4x2fv(location: WebGLUniformLocation | null, transpose: GLboolean, data: Float32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniformMatrix2x3fv(location: WebGLUniformLocation | null, transpose: GLboolean, data: Float32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniformMatrix4x3fv(location: WebGLUniformLocation | null, transpose: GLboolean, data: Float32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniformMatrix2x4fv(location: WebGLUniformLocation | null, transpose: GLboolean, data: Float32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniformMatrix3x4fv(location: WebGLUniformLocation | null, transpose: GLboolean, data: Float32List, srcOffset?: GLuint, srcLength?: GLuint)void
vertexAttribI4i(index: GLuint, x: GLint, y: GLint, z: GLint, w: GLint)void
vertexAttribI4iv(index: GLuint, values: Int32List)void
vertexAttribI4ui(index: GLuint, x: GLuint, y: GLuint, z: GLuint, w: GLuint)void
vertexAttribI4uiv(index: GLuint, values: Uint32List)void
vertexAttribIPointer(index: GLuint, size: GLint, type: GLenum, stride: GLsizei, offset: GLintptr)void
vertexAttribDivisor(index: GLuint, divisor: GLuint)void
drawArraysInstanced(mode: GLenum, first: GLint, count: GLsizei, instanceCount: GLsizei)void
drawElementsInstanced(mode: GLenum, count: GLsizei, type: GLenum, offset: GLintptr, instanceCount: GLsizei)void
drawRangeElements(mode: GLenum, start: GLuint, end: GLuint, count: GLsizei, type: GLenum, offset: GLintptr)void
drawBuffers(buffers: GLenum[])void
clearBufferfv(buffer: GLenum, drawbuffer: GLint, values: Float32List, srcOffset?: GLuint)void
clearBufferiv(buffer: GLenum, drawbuffer: GLint, values: Int32List, srcOffset?: GLuint)void
clearBufferuiv(buffer: GLenum, drawbuffer: GLint, values: Uint32List, srcOffset?: GLuint)void
clearBufferfi(buffer: GLenum, drawbuffer: GLint, depth: GLfloat, stencil: GLint)void
createQuery()WebGLQuery | null
deleteQuery(query: WebGLQuery | null)void
isQuery(query: WebGLQuery | null)GLboolean
beginQuery(target: GLenum, query: WebGLQuery)void
endQuery(target: GLenum)void
getQuery(target: GLenum, pname: GLenum)WebGLQuery | null
getQueryParameter(query: WebGLQuery, pname: GLenum)any
createSampler()WebGLSampler | null
deleteSampler(sampler: WebGLSampler | null)void
isSampler(sampler: WebGLSampler | null)GLboolean
bindSampler(unit: GLuint, sampler: WebGLSampler | null)void
samplerParameteri(sampler: WebGLSampler, pname: GLenum, param: GLint)void
samplerParameterf(sampler: WebGLSampler, pname: GLenum, param: GLfloat)void;
getSamplerParameter(sampler: WebGLSampler, pname: GLenum)any
fenceSync(condition: GLenum, flags: GLbitfield)WebGLSync | null
isSync(sync: WebGLSync | null)GLboolean
deleteSync(sync: WebGLSync | null)void
clientWaitSync(sync: WebGLSync, flags: GLbitfield, timeout: GLuint64)GLenum
waitSync(sync: WebGLSync, flags: GLbitfield, timeout: GLint64)void
getSyncParameter(sync: WebGLSync, pname: GLenum)any
createTransformFeedback()WebGLTransformFeedback | null
deleteTransformFeedback(tf: WebGLTransformFeedback | null)void
isTransformFeedback(tf: WebGLTransformFeedback | null)GLboolean
bindTransformFeedback(target: GLenum, tf: WebGLTransformFeedback | null)void
beginTransformFeedback(primitiveMode: GLenum)void
endTransformFeedback()void
transformFeedbackVaryings(program: WebGLProgram, varyings: string[], bufferMode: GLenum)void
getTransformFeedbackVarying(program: WebGLProgram, index: GLuint)WebGLActiveInfo | null
pauseTransformFeedback()void
resumeTransformFeedback()void
bindBufferBase(target: GLenum, index: GLuint, buffer: WebGLBuffer | null)void
bindBufferRange(target: GLenum, index: GLuint, buffer: WebGLBuffer | null, offset: GLintptr, size: GLsizeiptr)void
getIndexedParameter(target: GLenum, index: GLuint)any
getUniformIndices(program: WebGLProgram, uniformNames: string[])GLuint[] | null
getActiveUniforms(program: WebGLProgram, uniformIndices: GLuint[], pname: GLenum)any
getUniformBlockIndex(program: WebGLProgram, uniformBlockName: string)GLuint
getActiveUniformBlockParameter(program: WebGLProgram, uniformBlockIndex: GLuint, pname: GLenum)any
getActiveUniformBlockName(program: WebGLProgram, uniformBlockIndex: GLuint)string | null
uniformBlockBinding(program: WebGLProgram, uniformBlockIndex: GLuint, uniformBlockBinding: GLuint)void
createVertexArray()WebGLVertexArrayObject | null
deleteVertexArray(vertexArray: WebGLVertexArrayObject | null)void
isVertexArray(vertexArray: WebGLVertexArrayObject | null)GLboolean
bindVertexArray(array: WebGLVertexArrayObject | null)void

WebGL2RenderingContextOverloads

WebGL2RenderingContextOverloads

方法返回值类型
bufferData(target: GLenum, size: GLsizeiptr, usage: GLenum)void
bufferData(target: GLenum, srcData: BufferSource | null, usage: GLenum)void
bufferSubData(target: GLenum, dstByteOffset: GLintptr, srcData: BufferSource)void
bufferData(target: GLenum, srcData: ArrayBufferView, usage: GLenum, srcOffset: GLuint, length?: GLuint)void
bufferSubData(target: GLenum, dstByteOffset: GLintptr, srcData: ArrayBufferView, srcOffset: GLuint, length?: GLuint)void
texImage2D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, border: GLint, format: GLenum, type: GLenum, pixels: ArrayBufferView | null)void
texImage2D(target: GLenum, level: GLint, internalformat: GLint, format: GLenum, type: GLenum, source: TexImageSource)void
texSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, pixels: ArrayBufferView | null)void
texSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, format: GLenum, type: GLenum, source: TexImageSource)void
texImage2D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, border: GLint, format: GLenum, type: GLenum, pboOffset: GLintptr)void
texImage2D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, border: GLint, format: GLenum, type: GLenum, source: TexImageSource)void
texImage2D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, border: GLint, format: GLenum, type: GLenum, srcData: ArrayBufferView, srcOffset: GLuint)void
texSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, pboOffset: GLintptr)void
texSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, source: TexImageSource)void
texSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, srcData: ArrayBufferView, srcOffset: GLuint)void
compressedTexImage2D(target: GLenum, level: GLint, internalformat: GLenum, width: GLsizei, height: GLsizei, border: GLint, imageSize: GLsizei, offset: GLintptr)void
compressedTexImage2D(target: GLenum, level: GLint, internalformat: GLenum, width: GLsizei, height: GLsizei, border: GLint, srcData: ArrayBufferView, srcOffset?: GLuint, srcLengthOverride?: GLuint)void
compressedTexSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, width: GLsizei, height: GLsizei, format: GLenum, imageSize: GLsizei, offset: GLintptr)void
compressedTexSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, width: GLsizei, height: GLsizei, format: GLenum, srcData: ArrayBufferView, srcOffset?: GLuint, srcLengthOverride?: GLuint)void
uniform1fv(location: WebGLUniformLocation | null, data: Float32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniform2fv(location: WebGLUniformLocation | null, data: Float32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniform3fv(location: WebGLUniformLocation | null, data: Float32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniform4fv(location: WebGLUniformLocation | null, data: Float32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniform1iv(location: WebGLUniformLocation | null, data: Int32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniform2iv(location: WebGLUniformLocation | null, data: Int32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniform3iv(location: WebGLUniformLocation | null, data: Int32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniform4iv(location: WebGLUniformLocation | null, data: Int32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniformMatrix2fv(location: WebGLUniformLocation | null, transpose: GLboolean, data: Float32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniformMatrix3fv(location: WebGLUniformLocation | null, transpose: GLboolean, data: Float32List, srcOffset?: GLuint, srcLength?: GLuint)void
uniformMatrix4fv(location: WebGLUniformLocation | null, transpose: GLboolean, data: Float32List, srcOffset?: GLuint, srcLength?: GLuint)void
readPixels(x: GLint, y: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, dstData: ArrayBufferView | null)void
readPixels(x: GLint, y: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, offset: GLintptr)void
readPixels(x: GLint, y: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, dstData: ArrayBufferView, dstOffset: GLuint)void

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

「已注销」
关注
专栏目录
3.2、单选框（Radio）
lujianfeiccie2009的专栏
04-01 444
Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。
鸿蒙HarmonyOS项目实战开发：分布式画板_鸿蒙系统项目(1)
2303_79055785的博客
04-19 733
其中windows 工作台用来烧录和代码编辑，Linux编译服务器用来编译OpenHarmony代码，为了简化步骤，Linux编译服务器推荐安装Ubuntu20.04。（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）**技术知识点。在空白处点击右键，选择导入配置，选择ohos.cfg。
Radio 单选框
weixin_43989275的博客
04-21 242
在一组备选项中进行单选 由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。 要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。 <el-radio v-model=“radio” label=“1”>备选项 备选项 ...
Radio单选框
qq_37881565的博客
08-25 1万+
Radio单选框 在一组备选项中进行单选 基础用法 使用Radio组件，只需要设置v-model绑定变量，选中意味着变量的值为相应Radiolabel属性的值，label可以是string、number或boolean。 <template> <el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</el-ra.
ElementUI Form：Radio 单选框
ChinaDragon10的博客
01-30 2144
ElementUI Form：Radio 单选框
radio单选框操作
yang_zzu的博客
10-01 5944
radio单选框操作 1. 手动进行radio的选中，（初始化里面的语句可以进行手动的选中操作） 2. radio 选择触发事件 <form class="layui-form layui-form-pane" action="" id="userForm"> <input type="radio" name="sex" value="1" title="男" lay-filter="sexFilter"> <input type="radio" na
鸿蒙HarmonyOS项目实战开发：井字过三关小游戏_基于harmonyos的井字棋游戏开发
2401_84182146的博客
04-14 716
电话服务分布式应用开发通知与窗口管理多媒体技术安全技能任务管理WebGL国际化开发应用测试DFX面向未来设计鸿蒙系统移植和裁剪定制……《鸿蒙进阶实战》ArkTS实践UIAbility应用网络案例……获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料。
鸿蒙HarmonyOS项目实战：实现微信app效果（基础界面搭建）_鸿蒙原生开发 微信(1)
2401_84181253的博客
04-21 830
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）**技术知识点。有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的。希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，的状态更新之外，还需要对内容区域进行判断展示不同的界面。
鸿蒙HarmonyOS项目实战：实现微信app效果（页面实现）_鸿蒙应用开发微信
2401_84181253的博客
04-21 1139
由于在上篇文章中，牵扯到的一些布局知识点，没有讲解到，我一个同事看了我的文章之后，建议，对于一些基础的知识，也带一带简单做个说明，所以本次会把上次和本地用到的布局相关知识进行一个简单说明，如果对相关的知识比较熟悉，这部分内容可以酌情阅读。在布局填充到flex中之后，我们可以通过对横向和纵向进行控制，用来实现容器内内容的横竖向排列方式，可以帮我们实现等分、居左、居右等很多种对其方式。的优势就出来了，使用它可以将布局进行层级平铺，通过布局间的依赖关系控制，实现整体的界面布局。是不是很简单，瞬间理解了，有没有。
HarmonyOS开发：【基于命令行（安装编译工具）】
m0_62167422的博客
04-26 931
而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点如果。
ElementUI浅尝辄止34：Radio 单选框
渣渣砖
09-07 2216
在一组备选项中进行单选。
radio单选框学习
chenggong9527的博客
03-28 575
radio 学习 https://developers.weixin.qq.com/miniprogram/dev/component/icon.html wxml <!--pages/radio/radio.wxml--> <!-- radio单选框 1radio标签必须要和父元素radio-group一起使用 2value选中的单选框的值 3需要给radio-group绑定change事件 4需要在页面...
鸿蒙UI系统组件04——单选框（Radio）
最新发布
harmonyClassRoom的博客
07-18 635
Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。
Form表单之radio单选框操作
热门推荐
陈三的博客
01-11 8万+
input单选框，name相同的单选项为同一单选组： 1.选中某值的项： input单选1组： radio单选项1 radio单选项2 $("input:radio[name='radio1'][value=radio单选项2]").attr("checked","checked");和 $("input[name='radio1'][value=radio单选项2]").attr("ch
Element Plus 实例详解（八）___Radio 单选框
逆境清醒的博客
03-26 7362
Element Plus Radio 单选框功能，1、基础用法，2、禁用状态，3、单选框组，4、按钮样式 5、带有边框，四、官方资料中的各参数说明
radio单选框的选中与取消（超详细讲解！）
Alone_in_的博客
06-26 3万+
一、前情提要 刚开始想做的效果是这样：我操作了checkbox复选框，radio单选框的状态会随之变化。进而引出一系列问题，如：1、radio单选框选中了如何取消，取消了如何再选中；2、当checkbox选中状态发生变化时触发事件；3、操作checkbox复选框，radio单选框如何做出相对应的改变 二、案例解说 直接给你们抛详细案例。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageE...
【鸿蒙软件开发】ArkTS常见组件之单选框Radio和切换按钮Toggle
m0_62599305的博客
10-22 3986
Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。具体用法请参考Radio。Toggle组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换。具体用法请参考Toggle。其中对于Toggle独特的属性是，他是当Toggle选中后，所呈现的颜色以上就是今天要讲的内容，本文介绍了单选框Radio和切换按钮Toggle的使用，使用这些组件可以帮助我们快速构建ArkTS的界面。
对于单选框radio和复选框checkbox的使用
JAVA__BEST_LANGUAGE的博客
03-31 816
1,使用//复选 //默认选中可以添加checked属性 checked/>//单选//注意:多个选框的name属性的值要相同 2,判断是否被选中 var check = $("#diff").is(':checked'); //如果check为true表示被选中,false为没有被选中3,修改选中状态 $("#diff").attr("checked",true);//改为
OpenHarmony实战开发-动画效果、如何实现色彩渐变效果
2401_82546228的博客
04-28 360
通过颜色渐变接口，可以设置组件的背景颜色渐变效果，实现在两个或多个指定的颜色之间进行平稳的过渡。
精通Three.js：WebGL的JavaScript 3D库实战
"Learning Three.js： The Javascript 3D Library for WebGL" 《Learning Three.js： The Javascript 3D Library for WebGL》是由Jos Dirksen撰写的一本书，专注于介绍如何使用Three.js库来创建和动画化令人惊叹的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值