无着色器绘制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示例如下:
export default {
data: {
title: "DEMO BY TEAMOL",
fit:"cover",
fits: ["cover", "contain", "fill", "none", "scale-down"]
},
onInit() {
this.title = this.$t('strings.world');
},
BtnDraw2D(){
const canvas = this.$refs.canvas1;
const ctx = canvas.getContext('2d');
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();
}
}
4.点击按钮绘制2D图形的效果图
本文参考引用HarmonyOS官方开发文档,基于API9。
(责任编辑:阿里技术) |