画布组件

一、Canvas是什么？

Canvas组件是一种图形渲染组件，它提供了一个画布（canvas），开发者可以在上面绘制各种图形、文本等。Canvas组件通常用于创建游戏、数据可视化等需要动态绘制图形的应用程序。Canvas组件提供了多个API，开发者可以使用这些API进行绘制操作。常用的API包括绘制矩形、圆形、线条、文字等。开发者可以设置画布的大小、背景色、绘制的颜色、线条的宽度等属性。在Canvas组件中，开发者可以监听鼠标事件（如点击、移动等）和键盘事件，以便根据用户的交互来实现相应的操作。

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

2.1.Canvas接口

Canvas提供画布组件，用于自定义绘制图形。接口说明如下：

Canvas(context?: CanvasRenderingContext2D)

参数：

参数名	参数类型	必填	默认值	参数描述
context	CanvasRenderingContext2D	否	-	不支持多个Canvas共用一个CanvasRenderingContext2D对象，具体描述见CanvasRenderingContext2D对象。

还支持如下事件：

名称	参数	描述
onReady(event: () => void)	无	Canvas组件初始化完成时的事件回调，该事件之后Canvas组件宽高确定且可获取，可使用Canvas相关API进行绘制。从API version 9开始，该接口支持在ArkTS卡片中使用。

名称

参数

描述

onReady(event: () => void)

无

Canvas组件初始化完成时的事件回调，该事件之后Canvas组件宽高确定且可获取，可使用Canvas相关API进行绘制。

从API version 9开始，该接口支持在ArkTS卡片中使用。

2.2.CanvasRenderingContext2D对象

使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。

接口

CanvasRenderingContext2D(settings?: RenderingContextSetting)

参数：

参数名	参数类型	必填	参数描述
settings	RenderingContextSettings	否	见RenderingContextSettings。

2.3.RenderingContextSettings

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

RenderingContextSettings(antialias?: boolean)

参数：

参数名	参数类型	必填	参数描述
antialias	boolean	否	表明canvas是否开启抗锯齿。默认值：false

参数名

参数类型

必填

参数描述

antialias

boolean

否

表明canvas是否开启抗锯齿。

默认值：false

属性

名称	类型	描述
fillStyle	string \| CanvasGradient \| CanvasPattern	指定绘制的填充色。 - 类型为string时，表示设置填充区域的颜色。 - 类型为CanvasGradient时，表示渐变对象，使用createLinearGradient方法创建。 - 类型为CanvasPattern时，使用createPattern方法创建。从API version 9开始，该接口支持在ArkTS卡片中使用。
lineWidth	number	设置绘制线条的宽度。
strokeStyle	string \| CanvasGradient \| CanvasPattern	设置描边的颜色。 - 类型为string时，表示设置描边使用的颜色。 - 类型为CanvasGradient时，表示渐变对象，使用createLinearGradient方法创建。 - 类型为CanvasPattern时，使用createPattern方法创建。从API version 9开始，该接口支持在ArkTS卡片中使用。
lineCap	CanvasLineCap	指定线端点的样式，可选值为： - 'butt'：线端点以方形结束。 - 'round'：线端点以圆形结束。 - 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。默认值：'butt' 从API version 9开始，该接口支持在ArkTS卡片中使用。
lineJoin	CanvasLineJoin	指定线段间相交的交点样式，可选值为： - 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。 - 'bevel'：在线段相连处使用三角形为底填充，每个部分矩形拐角独立。 - 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。默认值：'miter' 从API version 9开始，该接口支持在ArkTS卡片中使用。
miterLimit	number	设置斜接面限制值，该值指定了线条相交处内角和外角的距离。默认值：10 从API version 9开始，该接口支持在ArkTS卡片中使用。
font	string	设置文本绘制中的字体样式。语法：ctx.font='font-size font-family' - font-size(可选)，指定字号和行高，单位只支持px。 - font-family(可选)，指定字体系列。语法：ctx.font='font-style font-weight font-size font-family' - font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。 - font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。 - font-size(可选)，指定字号和行高，单位只支持px。 - font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。默认值：'normal normal 14px sans-serif' 从API version 9开始，该接口支持在ArkTS卡片中使用。
textAlign	CanvasTextAlign	设置文本绘制中的文本对齐方式，可选值为： - 'left'：文本左对齐。 - 'right'：文本右对齐。 - 'center'：文本居中对齐。 - 'start'：文本对齐界线开始的地方。 - 'end'：文本对齐界线结束的地方。 ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。默认值：'left' 从API version 9开始，该接口支持在ArkTS卡片中使用。
textBaseline	CanvasTextBaseline	设置文本绘制中的水平对齐方式，可选值为： - 'alphabetic'：文本基线是标准的字母基线。 - 'top'：文本基线在文本块的顶部。 - 'hanging'：文本基线是悬挂基线。 - 'middle'：文本基线在文本块的中间。 - 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。 - 'bottom'：文本基线在文本块的底部。与ideographic基线的区别在于ideographic基线不需要考虑下行字母。默认值：'alphabetic' 从API version 9开始，该接口支持在ArkTS卡片中使用。
globalAlpha	number	设置透明度，0.0为完全透明，1.0为完全不透明。从API version 9开始，该接口支持在ArkTS卡片中使用。
lineDashOffset	number	设置画布的虚线偏移量，精度为float。默认值：0.0 从API version 9开始，该接口支持在ArkTS卡片中使用。
globalCompositeOperation	string	设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。默认值：'source-over' 从API version 9开始，该接口支持在ArkTS卡片中使用。
shadowBlur	number	设置绘制阴影时的模糊级别，值越大越模糊，精度为float。默认值：0.0 从API version 9开始，该接口支持在ArkTS卡片中使用。
shadowColor	string	设置绘制阴影时的阴影颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
shadowOffsetX	number	设置绘制阴影时和原有对象的水平偏移值。从API version 9开始，该接口支持在ArkTS卡片中使用。
shadowOffsetY	number	设置绘制阴影时和原有对象的垂直偏移值。从API version 9开始，该接口支持在ArkTS卡片中使用。
imageSmoothingEnabled	boolean	用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。默认值：true 从API version 9开始，该接口支持在ArkTS卡片中使用。
height	number	组件高度。单位：vp 从API version 9开始，该接口支持在ArkTS卡片中使用。
width	number	组件宽度。单位：vp

2.4.直接绘制

Canvas直接绘制图形的原理是通过Canvas API调用一系列绘制方法来在Canvas元素上绘制图形和图像。Canvas元素本身是一个空的矩形区域，通过获取Canvas的上下文（context），可以使用上下文提供的绘制方法来进行绘制。

@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(() => {
          //这里可以绘制内容:Canvas组件初始化完成时的事件回调，该事件之后Canvas组件宽高确定且可获取，可使用Canvas相关API进行绘制。
          //x: 左上角x坐标, y: 左上角y坐标, w: 指定矩形的宽度, h: 指定矩形的高度
          this.context.strokeRect(50,50, 100,100)
        })
    }
    .width("100%")
    .height("100%")
  }
}

预览如下图：

2.5.离屏绘制

离屏绘制（offscreen rendering）是指将渲染结果绘制到与屏幕不直接相关的缓冲区中进行处理。传统的渲染方式是直接将图像渲染到屏幕上，而离屏绘制则是在一个特定的缓冲区中进行渲染，然后再将渲染结果显示到屏幕上。

离屏绘制的主要作用是实现一些特殊效果，比如阴影、模糊、遮罩等。这些效果通常需要在渲染过程中进行多次操作，直接在屏幕上渲染会导致效率低下。使用离屏绘制可以在一个独立的缓冲区中进行这些操作，然后再将结果绘制到屏幕上。

离屏绘制可以通过一些图形库或引擎来实现，例如OpenGL、DirectX等。在移动设备上，离屏绘制通常使用Frame Buffer来实现。开发者可以通过指定一个离屏渲染的目标缓冲区，然后在这个缓冲区中进行渲染操作，最后再将结果绘制到屏幕上。

离屏绘制虽然可以实现一些特殊效果，但由于需要额外的资源和计算开销，使用不当会导致性能问题。因此，在使用离屏绘制时应该注意减少不必要的操作和资源消耗，以提高性能和用户体验。

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

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

代码如下：

@Entry
@Component
struct CanvasExample2  {
  //用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  //用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。
  private context:CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  //用来创建OffscreenCanvasRenderingContext2D对象，width为离屏画布的宽度，height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 300, this.settings)

  build() {
    Flex({direction:FlexDirection.Column, alignItems: ItemAlign.Center,justifyContent:FlexAlign.Center}){
      Canvas(this.context)
        .width("100%")
        .height("100%")
        .backgroundColor("#F5DC62")
        .onReady(() => {
          //在画布上绘制内容
          this.offContext.strokeRect(50, 50, 200, 100);

          //将离屏绘制渲染的图像在普通画布上显示
          //1.transferToImageBitmap在离屏画布最近渲染的图像上创建一个ImageBitmap对象。返回的是存储离屏画布上渲染的像素数据。
          let image = this.offContext.transferToImageBitmap();
          //2.显示给定的ImageBitmap对象。
          this.context.transferFromImageBitmap(image);

        })

    }.width("100%").height("100%")
  }
}

预览效果如下：

三、初始化画布组件

在HarmonyOS中，Canvas类是用于绘制图形的核心类。Canvas类提供了onReady方法，用于在Canvas准备好进行绘制之后的回调操作。当Canvas准备好进行绘制时，会调用onReady方法。开发者可以重写onReady方法，实现一些绘制前的准备工作，例如设置画笔颜色、绘制区域等。要使用Canvas的onReady方法，需要创建一个Canvas实例，然后通过实例调用onReady方法。

@Entry
@Component
struct CanvasExample3 {
  //用来配置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.fillStyle = "#0097D4";
          //fillRect 填充一个矩形。
          this.context.fillRect(50,50, 100,100)
          //这里可以绘制内容:Canvas组件初始化完成时的事件回调，该事件之后Canvas组件宽高确定且可获取，可使用Canvas相关API进行绘制。
          //x: 左上角x坐标, y: 左上角y坐标, w: 指定矩形的宽度, h: 指定矩形的高度
          this.context.strokeRect(60,60, 100,100)
        })
    }
    .width("100%")
    .height("100%")
  }
}

预览效果如下：

四、画布组件绘制方式

Canvas类支持使用Path2D对象来绘制复杂的路径图形。

Path2D是一个可重用的路径对象，用于描述二维空间中的路径。开发者可以使用Path2D对象来定义路径的轮廓，并在Canvas上绘制出来。

arc接口：

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void

绘制弧线路径。参数：

参数	类型	必填	默认值	描述
x	number	是	0	弧线圆心的x坐标值。
y	number	是	0	弧线圆心的y坐标值。
radius	number	是	0	弧线的圆半径。
startAngle	number	是	0	弧线的起始弧度。
endAngle	number	是	0	弧线的终止弧度。
counterclockwise	boolean	否	false	是否逆时针绘制圆弧。

案例代码绘制线条和圆形如下：

@Entry
@Component
struct CanvasExample4 {
  //用来配置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(() => {
          //这里可以绘制内容:Canvas组件初始化完成时的事件回调，该事件之后Canvas组件宽高确定且可获取，可使用Canvas相关API进行绘制。
          //x: 左上角x坐标, y: 左上角y坐标, w: 指定矩形的宽度, h: 指定矩形的高度
          //this.context.strokeRect(50,50, 100,100)

          //1.创建一个新的绘制路径。
          this.context.beginPath();
          //2.路径从当前点移动到指定点。
          this.context.moveTo(50, 50)
          //3.从当前点到指定点进行路径连接。
          this.context.lineTo(280,160)
          this.context.lineTo(10,10)
          //4.进行边框绘制操作。
          this.context.stroke()
        })

      Canvas(this.context)
        .width("100%")
        .height("100%")
        .backgroundColor("#F5DC62")
        .onReady(() => {

          //1.创建一个空路径对象。
          let region = new Path2D();
          //2.arc绘制弧线路径。
          region.arc(200, 200, 50, 0, 6.28)
          //3.进行边框绘制操作。
          this.context.stroke(region)
        })
    }
    .width("100%")
    .height("100%")
  }
}

预览效果如下：

五、画布组件常用方法

5.1.基础形状绘制

可以通过arc（绘制弧线路径）、 ellipse（绘制一个椭圆）、rect（创建矩形路径）等接口绘制基础形状

@Entry
@Component
struct CanvasExample5 {
  //用来配置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(() => {
          //1.绘制矩形
          this.context.beginPath(); //创建一个新的绘制路径。
          this.context.rect(50,80, 120, 100); //创建矩形路径。
          this.context.stroke();

          //2.绘制圆形
          this.context.beginPath();
          this.context.arc(120,280,70,0,6.28)
          this.context.stroke();

          //3.绘制椭圆
          this.context.beginPath();
          this.context.ellipse(150, 450, 90, 30, Math.PI * 0.75, Math.PI * 0, Math.PI * 2)
          this.context.stroke()
        })
    }
    .width("100%")
    .height("100%")
  }
}

预览效果如下：

5.2.文本绘制

可以通过fillText（绘制填充类文本）、strokeText（绘制描边类文本）等接口进行文本绘制。

@Entry
@Component
struct CanvasExample6 {
  //用来配置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(() => {
          //1.绘制填充类文本
          this.context.font = "90px sans-serif"; //字形。默认值为 10px sans-serif。
          this.context.fillText("HelloWorld!!!",100, 200)

          //2.绘制描边类文本
          this.context.font = "90px sans-serif";
          this.context.strokeText("HelloWorld!!!",100, 300)
        })
    }
    .width("100%")
    .height("100%")
  }
}

预览效果如下：

5.3 绘制图片和图像像素信息处理

可以通过drawImage（图像绘制）、putImageData（使用ImageData数据填充新的矩形区域）等接口绘制图片，通过createImageData（创建新的ImageData 对象）、getPixelMap（以当前canvas指定区域内的像素创建PixelMap对象）、getImageData（以当前canvas指定区域内的像素创建ImageData对象）等接口进行图像像素信息处理。

接口	描述
drawImage	用于绘制图像
putImageData	使用ImageData数据填充新的矩形区域
createImageData	创建新的ImageData对象
getPixelMap	以当前canvas指定区域内的像素创建PixelMap对象
getImageData	以当前canvas指定区域内的像素创建ImageData对象

案例1：加载一张图片，然后将图片绘制到屏幕，然后获取加载区域的像素，创建ImageData对象，使用ImageData数据填充新的矩形区域，如下：

@Entry
@Component
struct GetImageData {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  private img:ImageBitmap = new ImageBitmap("/common/images/wallhaven-yxx3vl.png")

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor(Color.White)
        .onReady(() =>{
          // 使用drawImage接口将图片画在（0，0）为起点，宽高130的区域
          this.offContext.drawImage(this.img,0,0,130,130);
          // 使用getImageData接口，获得canvas组件区域中，（50，50）为起点，宽高130范围内的绘制内容
          let imageData = this.offContext.getImageData(50,50,130,130);
          // 使用putImageData接口将得到的ImageData画在起点为（150， 150）的区域中
          this.offContext.putImageData(imageData,150,150);
          // 将离屏绘制的内容画到canvas组件上
          let image = this.offContext.transferToImageBitmap();
          this.context.transferFromImageBitmap(image);
        })
    }
    .width('100%')
    .height('100%')
  }
}

预览效果如下：

案例2：绘制表盘：

@Entry
@Component
struct GetImageData2 {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
  private img:ImageBitmap = new ImageBitmap("/common/images/ic_clock_pan.png")

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor(Color.White)
        .onReady(() =>{
          // 使用drawImage接口将图片画在（0，0）为起点，宽高130的区域
          this.offContext.drawImage(this.img,50,100,250,250);

          // 将离屏绘制的内容画到canvas组件上
          let image = this.offContext.transferToImageBitmap();
          this.context.transferFromImageBitmap(image);
        })
    }
    .width('100%')
    .height('100%')
  }
}

预览效果如下：

5.4 其他方法

Canvas中还提供其他类型的方法。渐变（CanvasGradient对象）相关的方法：createLinearGradient（创建一个线性渐变色）、createRadialGradient（创建一个径向渐变色）等。Canvas的createRadialGradient方法用于创建一个径向渐变色。语法：

createRadialGradient(x0, y0, r0, x1, y1, r1)

参数说明：

x0：渐变的起始圆的x坐标
y0：渐变的起始圆的y坐标
r0：渐变的起始圆的半径
x1：渐变的结束圆的x坐标
y1：渐变的结束圆的y坐标
r1：渐变的结束圆的半径

案例代码如下：

@Entry
@Component
struct GetImageData3 {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() =>{
          //创建一个径向渐变色的CanvasGradient对象
          let grad = this.context.createRadialGradient(180,200, 60, 180,200, 200)

          //为CanvasGradient对象设置渐变断点值，包括偏移和颜色
          grad.addColorStop(0.0, "#E87361");
          grad.addColorStop(0.5, '#FFFFF0');
          grad.addColorStop(1.0, '#BDDB69');

          //用CanvasGradient对象填充矩形
          this.context.fillStyle = grad;//描述填充颜色和样式的属性。默认值为 #000（黑色）。选项如下： color: 颜色字符串 CanvasGradient：颜色梯度对象。
          this.context.fillRect(0,0, 400,400)//填充一个矩形。参数分别是指定矩形左上角点的x,y坐标。指定矩形的宽、高度。

        })
    }
    .width('100%')
    .height('100%')
  }
}

预览效果如下：

六、场景示例

6.1.规则基础形状绘制

fillRect：填充一个矩形。

fillRect(x: number, y: number, w: number, h: number): void

参数：

参数	类型	必填	说明
x	number	是	指定矩形左上角点的x坐标。
y	number	是	指定矩形左上角点的y坐标。
width	number	是	指定矩形的宽度。
height	number	是	指定矩形的高度。

clearRect：删除指定区域内的绘制内容。

clearRect(x: number, y: number, w: number, h: number): void

参数：

参数	类型	必填	描述
x	number	是	指定矩形上的左上角x坐标。
y	number	是	指定矩形上的左上角y坐标。
w	number	是	指定矩形的宽度。
h	number	是	指定矩形的高度。

案例代码如下：

@Entry
@Component
struct ClearRect  {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() =>{
          //设定填充样式，填充颜色设置为蓝色
          this.context.fillStyle = "#0097D4"
          //以（50,50）为左上顶点，画一个宽和高为200的矩形
          this.context.fillRect(50,50, 200,200)
          //以(70,70)为左上顶点，清除一个宽150，高为100的矩形
          this.context.clearRect(70,70, 150 ,100)

        })
    }
    .width('100%')
    .height('100%')
  }
}

预览效果如下：

6.2 不规则图形绘制

moveTo

路径从当前点移动到指定点。

moveTo(x: number, y: number): void

参数：

参数	类型	必填	默认值	说明
x	number	是	0	指定位置的x坐标。
y	number	是	0	指定位置的y坐标。

lineTo

从当前点到指定点进行路径连接。

lineTo(x: number, y: number): void

参数：

参数	类型	必填	默认值	描述
x	number	是	0	指定位置的x坐标。
y	number	是	0	指定位置的y坐标。

closePath

结束当前路径形成一个封闭路径。接口如下：

closePath(): void

fill

对封闭路径进行填充。

fill(fillRule?: CanvasFillRule): void

参数:

参数	类型	必填	默认值	描述
fillRule	CanvasFillRule	否	"nonzero"	指定要填充对象的规则。可选参数为："nonzero", "evenodd"。

参数

类型

必填

默认值

描述

fillRule

CanvasFillRule

否

"nonzero"

指定要填充对象的规则。

可选参数为："nonzero", "evenodd"。

案例：绘制一个矩形

@Entry
@Component
struct Path2d  {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() =>{
          //使用Path2D的接口构造一个五边形
          let path = new Path2D();//创建一个空路径对象。
          path.moveTo(150,50); //路径从当前点移动到指定点。
          path.lineTo(50,150); //从当前点到指定点进行路径连接。
          path.lineTo(100,250);
          path.lineTo(200,250);
          path.lineTo(250,150);

          //结束当前路径形成一个封闭路径。
          path.closePath();

          //设定填充色为蓝色
          this.context.fillStyle = "#0097D4";
          //使用填充的方式，将Path2D 描述的五边形绘制在canvas组件内部
          this.context.fill(path)

        })
    }
    .width('100%')
    .height('100%')
  }
}

预览效果如下：

posted @ 2024-02-21 18:30 酒剑仙* 阅读(173) 评论(0) 收藏举报

刷新页面返回顶部

Augus

画布组件

一、Canvas是什么？

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

2.1.Canvas接口

2.2.CanvasRenderingContext2D对象

2.3.RenderingContextSettings

2.4.直接绘制

2.5.离屏绘制

三、初始化画布组件

四、画布组件绘制方式

五、画布组件常用方法

5.1.基础形状绘制

5.2.文本绘制

5.3 绘制图片和图像像素信息处理

5.4 其他方法

六、场景示例

6.1.规则基础形状绘制

fillRect：填充一个矩形。

clearRect：删除指定区域内的绘制内容。

6.2 不规则图形绘制

moveTo

lineTo

closePath

fill

公告