鸿蒙原生应用元服务开发-WebGL网页图形库开发无着色器绘制2D图形

本文主要是介绍鸿蒙原生应用元服务开发-WebGL网页图形库开发无着色器绘制2D图形，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

无着色器绘制2D图形
使用WebGL开发时，为保证界面图形显示效果，请使用真机运行。
此场景为未使用WebGL绘制的2D图形（CPU绘制非GPU绘制）。开发示例如下：

1.创建页面布局。index.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.设置页面样式。index.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;
}

3.编辑JavaScript代码文件，增加2D绘制逻辑代码。index.js示例如下：

// 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 widthctx.lineWidth = 10;// Wallctx.strokeRect(75, 140, 150, 110);// Doorctx.fillRect(130, 190, 40, 60);// Roofctx.beginPath();ctx.moveTo(50, 140);ctx.lineTo(150, 60);ctx.lineTo(250, 140);ctx.closePath();ctx.stroke();}
}

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

本文参考引用HarmonyOS官方开发文档，基于API9。

这篇关于鸿蒙原生应用元服务开发-WebGL网页图形库开发无着色器绘制2D图形的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---