无着色器绘制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。
