鸿蒙OS WebGL开发：无着色器绘制2D图形

在鸿蒙OS前端开发中，我们有时需要绘制简单的2D图形，例如线条、矩形、多边形等。对于这类需求，我们可以直接使用Canvas 2D API，而无需借助WebGL和着色器，从而简化开发流程。

1. 创建页面布局 (index.hml)

首先，我们需要在 HML 文件中创建页面基本结构，包括一个 Canvas 画布和一个按钮，用于触发绘图操作。

<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. 设置页面样式 (index.css)

接下来，在 CSS 文件中设置页面样式，包括容器和按钮的布局、颜色、字体等。

.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.btn-button {
  margin: 1px;
  height: 40px;
  width: 220px;
  background-color: lightblue;
  font-size: 20px;
  text-color: blue;
}

代码解释：

• .container：设置容器的 flex 布局，使其内容垂直居中。
• .btn-button：设置按钮的外边距、尺寸、背景颜色、字体大小和颜色。

3. 编写 JavaScript 绘图逻辑 (index.js)

最后，我们在 JavaScript 文件中编写绘图逻辑，包括获取 Canvas 上下文、设置绘制属性以及调用绘图函数等。

// index.js
export default {
  //NAPI交互代码
  data: {
    title: "DEMO BY TEAMOL",
    fit:"cover",
    fits: ["cover", "contain", "fill", "none", "scale-down"]
  },
  onInit() {
    this.title = this.$t('strings.world');
  },
  BtnDraw2D(){
    // 获取canvas元素
    const canvas = this.$refs.canvas1;
    // 获取2D上下文，用于后续绘图操作
    const ctx = canvas.getContext('2d');

    // 执行CPU绘制函数
    // Set line width
    ctx.lineWidth = 10;

    // 绘制一个矩形边框，表示墙壁
    ctx.strokeRect(75, 140, 150, 110);

    // 绘制一个填充矩形，表示门
    ctx.fillRect(130, 190, 40, 60);

    // 绘制一个三角形，表示屋顶
    ctx.beginPath();
    ctx.moveTo(50, 140);
    ctx.lineTo(150, 60);
    ctx.lineTo(250, 140);
    ctx.closePath();
    ctx.stroke();
  }
}

点击按钮绘制2D图形的效果图：

总结

通过以上步骤，我们成功地使用 Canvas 2D API 实现了无着色器绘制2D图形。Canvas 提供了丰富的绘图函数，可以满足大部分简单图形绘制需求。