鸿蒙原生应用元服务开发-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 width
        ctx.lineWidth = 10;
        // Wall
        ctx.strokeRect(75, 140, 150, 110);
        // Door
        ctx.fillRect(130, 190, 40, 60);
        // Roof
        ctx.beginPath();
        ctx.moveTo(50, 140);
        ctx.lineTo(150, 60);
        ctx.lineTo(250, 140);
        ctx.closePath();
        ctx.stroke();
    }
}

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

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