鸿蒙开发中使用画布Canvas绘制自定义图形、字体描边！

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

aabbccdddddd

1109人浏览 · 2025-03-25 16:07:59

aabbccdddddd · 2025-03-25 16:07:59 发布

实现方式：

一、使用CanvasRenderingContext2D对象在Canvas组件上进行绘制

主要使用流程如下：

1.private settings: RenderingContextSettings = new RenderingContextSettings(true)

//用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。

2.private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

//用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。

3.把context设置到canvas中，通过onReady()实现绘制

实例如下：

@Entry
@Component
struct 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%')
  }
}

二、使用
OffscreenCanvasRenderingContext2D对象在Canvas组件上进行绘制（也称离屏绘制）离屏绘制是指将需要绘制的内容先绘制在缓存区，再将其转换成图片，一次性绘制到Canvas上，加快了绘制速度。过程为：通过transferToImageBitmap方法将离屏画布最近渲染的图像创建为一个ImageBitmap对象。再通过CanvasRenderingContext2D对象的transferFromImageBitmap方法显示给定的ImageBitmap对象。

主要使用流程如下：

1.private settings: RenderingContextSettings = new RenderingContextSettings(true)

//用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。

2.private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

//用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。

3.private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)

//用来创建OffscreenCanvas对象，width为离屏画布的宽度，height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。

4.把context设置到canvas中，在onReady()方法中通过设置offCanvas

实例如下：

@Entry
@Component
struct CanvasExample2 {
  //用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。true表明开启抗锯齿
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  //用来创建OffscreenCanvas对象，width为离屏画布的宽度，height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() => {
          let offContext = this.offCanvas.getContext("2d", this.settings)
          //可以在这里绘制内容
          offContext.strokeRect(50, 50, 200, 150);
          //将离屏绘值渲染的图像在普通画布上显示
          let image = this.offCanvas.transferToImageBitmap();
          this.context.transferFromImageBitmap(image);
        })
    }
    .width('100%')
    .height('100%')
  }
}

三、实现效果和场景

1.矩形绘制

Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#F5DC62')
.onReady(() => {
//绘制矩形
this.context.beginPath();
this.context.rect(100, 50, 100, 100);
this.context.stroke();
//绘制圆形
this.context.beginPath();
this.context.arc(150, 250, 50, 0, 6.28);
this.context.stroke();
//绘制椭圆
this.context.beginPath();
this.context.ellipse(150, 450, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2);
this.context.stroke();
})

2.文本绘制

Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#F5DC62')
.onReady(() => {
// 文本填充
this.context.font = '50px bolder sans-serif';
this.context.fillText("Hello World!", 50, 100);
// 文本描边
this.context.strokeStyle = "#ff0000"
this.context.lineWidth = 2
this.context.font = '50px bolder sans-serif';
this.context.strokeText("Hello World!", 50, 150);
})

1.效果图 2.效果图

3.文本组件


@Component
export struct  CanvasText{
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State text:string='0'
  @State canHeight:number|string=80
  @State canWidth:number|string='100%'
  @State textFontSize:string='250px'
  @State strokeStyleColor:string='#CA6B00'
  @State fillStyleColor:string='#fff'
  @State offX:number=0
  @State offY:number=70
  @State lineWidth:number=6

  build() {
    Column(){
      Canvas(this.context)
        .width(this.canWidth)
        .align(Alignment.TopStart)
        .height(this.canHeight)
        .onReady(() => {
          // 描边文本
          this.context.font =`${this.textFontSize} bold`
          this.context.strokeStyle = this.strokeStyleColor;

          // 描边宽度
          this.context.lineWidth = this.lineWidth
          this.context.strokeText(this.text, this.offX, this.offY);
          this.context.fillStyle = this.fillStyleColor;
          this.context.fillText(this.text, this.offX, this.offY);
        })


    }


  }


}