Canvas 组件在鸿蒙应用中用于绘制自定义图形，提供丰富的绘制功能和灵活的定制能力。通过 Canvas，可以创建矩形、圆形、路径、文本等基础图形，为鸿蒙应用增添个性化的视觉效果。本篇将介绍 Canvas 组件的基础操作，涵盖绘制矩形、圆形、路径和文本的实例。

关键词

• Canvas 组件
• 绘图
• 矩形绘制
• 圆形绘制
• 路径与文本

---

一、Canvas 组件概述

Canvas 组件是鸿蒙中用于自定义图形绘制的关键组件。通过 Canvas，开发者可以绘制多种图形元素，包括矩形、圆形、路径和文本，满足应用中各种个性化的设计需求。

---

二、基础图形绘制

2.1 绘制矩形

Canvas 提供了 fillRect 和 strokeRect 方法，可以绘制填充矩形和描边矩形。

@Entry
@Component
struct RectangleCanvasExample {build() {Column() {Canvas(this.context).width('100%').height(500).onReady(() => {// 设置填充颜色为蓝色this.context.fillStyle = '#0000FF';// 绘制填充矩形this.context.fillRect(150, 150, 300, 200);// 设置描边颜色为黑色this.context.strokeStyle = '#000000';// 设置描边宽度为 5this.context.lineWidth = 5;// 绘制描边矩形this.context.strokeRect(150, 150, 300, 200);});}}private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
}

效果示例：在画布上绘制一个蓝色填充、黑色边框的矩形。

---

2.2 绘制圆形

使用 arc 方法可以绘制圆形或圆弧，通过设置圆心坐标、半径等参数，可以实现完整圆形和部分圆弧的绘制。

@Entry
@Component
struct CircleCanvasExample {