HarmonyOS WebGL教程：利用 Canvas 绘制图形

HarmonyOS 提供了 WebGL API，让开发者可以使用 JavaScript 在 Canvas 上进行高性能的 2D 和 3D 图形绘制。

WebGL 简介

• 基于 OpenGL ES 2.0：WebGL 遵循 OpenGL ES 2.0 规范，提供了丰富的图形绘制功能，包括位置、颜色、纹理等处理。
• 兼容 JS 的类 Web 开发范式：目前，HarmonyOS WebGL 仅支持在兼容 JavaScript 的类 Web 开发范式中使用。
• 单线程调用：WebGL 遵循 OpenGL 协议，不支持多线程调用。

使用方法

1、创建 Canvas： 在 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>

2、获取 WebGL 上下文：在 JavaScript 代码中获取 Canvas 元素的 WebGL 上下文。

// 获取 canvas 组件实例
const el = this.$refs.canvas1;
// 从 canvas 组件实例获取 WebGL 上下文
const gl = el.getContext('webgl'); 

3、调用 WebGL API：使用获取的 WebGL 上下文 (gl) 调用 WebGL API 进行图形绘制。

// 调用 WebGL API
gl.clearColor(0.0, 0.0, 0.0, 1.0); 

示例

以下代码演示了如何使用 WebGL 在 Canvas 上绘制一个红色的矩形：

<!-- xxx.hml -->
<div class="container">
    <canvas ref="canvas1" style="width : 400px; height : 200px;"></canvas>
</div>

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

// xxx.js
export default {
  onReady() {
    const el = this.$refs.canvas1;
    const gl = el.getContext('webgl');

    // 设置清空颜色缓冲区的颜色
    gl.clearColor(1.0, 0.0, 0.0, 1.0); 
    // 清空颜色缓冲区
    gl.clear(gl.COLOR_BUFFER_BIT); 
  },
};

总结

HarmonyOS WebGL 提供了一种强大的方式来创建交互式图形应用程序。开发者可以利用 WebGL 的丰富功能和 JavaScript 的灵活性来构建各种图形应用，例如游戏、数据可视化和 3D 模型展示。