鸿蒙UI系统组件15——画布(Canvas)

最新推荐文章于 2025-10-17 09:13:00 发布

原创

最新推荐文章于 2025-10-17 09:13:00 发布 · 3.1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #ui #华为 #鸿蒙

如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！扫描下方名片，关注公众号，公众号更新更快，同时也有更多学习资料和技术讨论群。

⭐️ 概述

前一章我们学习了Shape绘制来绘制自定义形状，在实际的业务开发中，有可能我们需要绘制更复杂的图形，例如统计图中的饼图、折线图等，除了绘制图形外，可能还会绘制一些复杂的组件效果，此时，我们就需要用到画布(Canvas)组件来满足我们的需求了。

画布(Canvas)组件主要用于自定义绘制图形，开发者使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制，绘制对象可以是基础形状、文本、图片等。

画布Canvas是一个非常复杂的课题，我们这里只针对其用法做探讨。

1 使用画布组件绘制自定义图形

总共有两种种形式可以绘制自定义图形，下面分别做介绍：

👉🏻 方式1(较常用)：使用CanvasRenderingContext2D对象在Canvas画布上绘制，代码demo如下：

@Entry@Componentstruct CanvasExample1 {
  
    //用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。  private settings: RenderingContextSettings = new RenderingContextSettings(true)  //用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  build() {
  
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  
        //在canvas中调用CanvasRenderingContext2D对象。      Canvas(this.context)        .width('100%')        .height('100%')        .backgroundColor('#F5DC62')        .onReady(() => {
  
            //可以在这里绘制内容。          this.context.strokeRect(50, 50, 200, 150);        })    }    .width('100%')    .height('100%')  }}

预览效果如下：

👉🏻 方式2：离屏绘制，将需要绘制的内容先绘制在缓存区，再将其转换成图片，一次性绘制到Canvas上，加快了绘制速度。过程为：

通过transferToImageBitmap方法将离屏画布最近渲染的图像创建为一个ImageBitmap对象。
通过CanvasRenderingContext2D对象的transferFromImageBitmap方法显示给定的ImageBitmap对象。

代码如下：

@Entry@Componentstruct CanvasExample2 {
  
  //用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。true表明开启抗锯齿  private settings: RenderingContextSettings = new RenderingContextSettings(true)  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)//用来创建OffscreenCanvasRenderingContext2D对象，width为离屏画布的宽度，height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanv