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

「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas 组件自定义绘图-LMLPHP

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

一、Canvas 组件概述

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


二、基础图形绘制
2.1 绘制矩形

Canvas 提供了 fillRectstrokeRect 方法,可以绘制填充矩形和描边矩形。

@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';
          // 设置描边宽度为 5
          this.context.lineWidth = 5;
          // 绘制描边矩形
          this.context.strokeRect(150, 150, 300, 200);
        });
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
}

2.2 绘制圆形

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

@Entry
@Component
struct CircleCanvasExample {
   
  build
11-03 16:04