鸿蒙OpenHarmony【CanvasRenderingContext2D方法】画布绘制

最新推荐文章于 2025-05-26 14:39:28 发布
最新推荐文章于 2025-05-26 14:39:28 发布
阅读量1k 收藏 19
点赞数 27
CC 4.0 BY-SA版权
分类专栏： dd 文章标签： harmonyos 华为 鸿蒙 鸿蒙系统 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/asfn123123/article/details/143779479

方法

以下方法在隐藏页面中调用会产生缓存，应避免在隐藏页面中频繁刷新Canvas。

fillRect

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

填充一个矩形。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
xnumber是指定矩形左上角点的x坐标。默认单位：vp。
ynumber是指定矩形左上角点的y坐标。默认单位：vp。
wnumber是指定矩形的宽度。默认单位：vp。
hnumber是指定矩形的高度。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct FillRect {
  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('#ffff00')
        .onReady(() =>{
          this.context.fillRect(30,30,100,100)
       })
      }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

strokeRect

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

绘制具有边框的矩形，矩形内部不填充。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
xnumber是指定矩形的左上角x坐标。默认单位：vp。
ynumber是指定矩形的左上角y坐标。默认单位：vp。
wnumber是指定矩形的宽度。默认单位：vp。
hnumber是指定矩形的高度。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct StrokeRect {
  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('#ffff00')
        .onReady(() =>{
          this.context.strokeRect(30, 30, 200, 150)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

clearRect

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

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

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
xnumber是指定矩形上的左上角x坐标。默认单位：vp。
ynumber是指定矩形上的左上角y坐标。默认单位：vp。
wnumber是指定矩形的宽度。默认单位：vp。
hnumber是指定矩形的高度。默认单位：vp。

示例：

// xxx.ets
@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('#ffff00')
        .onReady(() =>{
          this.context.fillStyle = 'rgb(0,0,255)'
          this.context.fillRect(20,20,200,200)
          this.context.clearRect(30,30,150,100)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

fillText

fillText(text: string, x: number, y: number, maxWidth?: number): void

绘制填充类文本。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
textstring是需要绘制的文本内容。
xnumber是需要绘制的文本的左下角x坐标。默认单位：vp。
ynumber是需要绘制的文本的左下角y坐标。默认单位：vp。
maxWidthnumber否指定文本允许的最大宽度。默认单位：vp。默认值：不限制宽度。

示例：

// xxx.ets
@Entry
@Component
struct FillText {
  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('#ffff00')
        .onReady(() =>{
          this.context.font = '30px sans-serif'
          this.context.fillText("Hello World!", 20, 100)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

strokeText

strokeText(text: string, x: number, y: number, maxWidth?: number): void

绘制描边类文本。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
textstring是需要绘制的文本内容。
xnumber是需要绘制的文本的左下角x坐标。默认单位：vp。
ynumber是需要绘制的文本的左下角y坐标。默认单位：vp。
maxWidthnumber否需要绘制的文本的最大宽度。默认单位：vp。默认值：不限制宽度。

示例：

// xxx.ets
@Entry
@Component
struct StrokeText {
  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('#ffff00')
        .onReady(() =>{
          this.context.font = '55px sans-serif'
          this.context.strokeText("Hello World!", 20, 60)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

measureText

measureText(text: string): TextMetrics

该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。不同设备上获取的宽度值可能不同。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
textstring是需要进行测量的文本。

返回值：

类型说明
[TextMetrics]文本的尺寸信息。

示例：

// xxx.ets
@Entry
@Component
struct MeasureText {
  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('#ffff00')
        .onReady(() =>{
          this.context.font = '50px sans-serif'
          this.context.fillText("Hello World!", 20, 100)
          this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

stroke

stroke(): void

根据当前的路径，进行边框绘制操作。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

// xxx.ets
@Entry
@Component
struct Stroke {
  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('#ffff00')
        .onReady(() => {
          this.context.moveTo(125, 25)
          this.context.lineTo(125, 105)
          this.context.lineTo(175, 105)
          this.context.lineTo(175, 25)
          this.context.strokeStyle = 'rgb(255,0,0)'
          this.context.stroke()
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

stroke(path: Path2D): void

根据指定的路径，进行边框绘制操作。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
path[Path2D]是需要绘制的Path2D。

示例：

// xxx.ets
@Entry
@Component
struct Stroke {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private path2Da: Path2D = new Path2D()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          this.path2Da.moveTo(25, 25)
          this.path2Da.lineTo(25, 105)
          this.path2Da.lineTo(75, 105)
          this.path2Da.lineTo(75, 25)
          this.context.strokeStyle = 'rgb(0,0,255)'
          this.context.stroke(this.path2Da)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

beginPath

beginPath(): void

创建一个新的绘制路径。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

// xxx.ets
@Entry
@Component
struct BeginPath {
  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('#ffff00')
        .onReady(() =>{
          this.context.beginPath()
          this.context.lineWidth = 6
          this.context.strokeStyle = '#0000ff'
          this.context.moveTo(15, 80)
          this.context.lineTo(280, 160)
          this.context.stroke()
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

moveTo

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

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

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
xnumber是指定位置的x坐标。默认单位：vp。
ynumber是指定位置的y坐标。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct MoveTo {
  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('#ffff00')
        .onReady(() =>{
          this.context.beginPath()
          this.context.moveTo(10, 10)
          this.context.lineTo(280, 160)
          this.context.stroke()
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

lineTo

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

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

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
xnumber是指定位置的x坐标。默认单位：vp。
ynumber是指定位置的y坐标。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct LineTo {
  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('#ffff00')
        .onReady(() =>{
          this.context.beginPath()
          this.context.moveTo(10, 10)
          this.context.lineTo(280, 160)
          this.context.stroke()
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

closePath

closePath(): void

结束当前路径形成一个封闭路径。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

// xxx.ets
@Entry
@Component
struct ClosePath {
  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('#ffff00')
        .onReady(() =>{
            this.context.beginPath()
            this.context.moveTo(30, 30)
            this.context.lineTo(110, 30)
            this.context.lineTo(70, 90)
            this.context.closePath()
            this.context.stroke()
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

createPattern

createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null

通过指定图像和重复方式创建图片填充的模板。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
image[ImageBitmap]是图源对象，具体参考ImageBitmap对象。
repetitionstringnull是

返回值：

类型说明
[CanvasPattern]null

示例：

// xxx.ets
@Entry
@Component
struct CreatePattern {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let pattern = this.context.createPattern(this.img, 'repeat')
          if (pattern) {
            this.context.fillStyle = pattern
          }
          this.context.fillRect(0, 0, 200, 200)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

bezierCurveTo

bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void

创建三次贝赛尔曲线的路径。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
cp1xnumber是第一个贝塞尔参数的x坐标值。默认单位：vp。
cp1ynumber是第一个贝塞尔参数的y坐标值。默认单位：vp。
cp2xnumber是第二个贝塞尔参数的x坐标值。默认单位：vp。
cp2ynumber是第二个贝塞尔参数的y坐标值。默认单位：vp。
xnumber是路径结束时的x坐标值。默认单位：vp。
ynumber是路径结束时的y坐标值。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct BezierCurveTo {
  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('#ffff00')
        .onReady(() =>{
          this.context.beginPath()
          this.context.moveTo(10, 10)
          this.context.bezierCurveTo(20, 100, 200, 100, 200, 20)
          this.context.stroke()
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

quadraticCurveTo

quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void

创建二次贝赛尔曲线的路径。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
cpxnumber是贝塞尔参数的x坐标值。默认单位：vp。
cpynumber是贝塞尔参数的y坐标值。默认单位：vp。
xnumber是路径结束时的x坐标值。默认单位：vp。
ynumber是路径结束时的y坐标值。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct QuadraticCurveTo {
  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('#ffff00')
        .onReady(() =>{
          this.context.beginPath()
          this.context.moveTo(20, 20)
          this.context.quadraticCurveTo(100, 100, 200, 20)
          this.context.stroke()
      })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

arc

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

绘制弧线路径。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
xnumber是弧线圆心的x坐标值。默认单位：vp。
ynumber是弧线圆心的y坐标值。默认单位：vp。
radiusnumber是弧线的圆半径。默认单位：vp。
startAnglenumber是弧线的起始弧度。单位：弧度
endAnglenumber是弧线的终止弧度。单位：弧度
counterclockwiseboolean否是否逆时针绘制圆弧。true:逆时针方向绘制椭圆。false:顺时针方向绘制椭圆。默认值：false。

示例：

// xxx.ets
@Entry
@Component
struct Arc {
  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('#ffff00')
        .onReady(() =>{
          this.context.beginPath()
          this.context.arc(100, 75, 50, 0, 6.28)
          this.context.stroke()
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

arcTo

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void

依据给定的控制点和圆弧半径创建圆弧路径。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
x1number是第一个控制点的x坐标值。默认单位：vp。
y1number是第一个控制点的y坐标值。默认单位：vp。
x2number是第二个控制点的x坐标值。默认单位：vp。
y2number是第二个控制点的y坐标值。默认单位：vp。
radiusnumber是圆弧的圆半径值。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct ArcTo {
  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('#ffff00')
        .onReady(() =>{
          // 切线
          this.context.beginPath()
          this.context.strokeStyle = '#808080'
          this.context.lineWidth = 1.5;
          this.context.moveTo(360, 20);
          this.context.lineTo(360, 170);
          this.context.lineTo(110, 170);
          this.context.stroke();
          
          // 圆弧
          this.context.beginPath()
          this.context.strokeStyle = '#000000'
          this.context.lineWidth = 3;
          this.context.moveTo(360, 20)
          this.context.arcTo(360, 170, 110, 170, 150)
          this.context.stroke()
          
          // 起始点
          this.context.beginPath();
          this.context.fillStyle = '#00ff00';
          this.context.arc(360, 20, 4, 0, 2 * Math.PI);
          this.context.fill();
          
          // 控制点
          this.context.beginPath();
          this.context.fillStyle = '#ff0000';
          this.context.arc(360, 170, 4, 0, 2 * Math.PI);
          this.context.arc(110, 170, 4, 0, 2 * Math.PI);
          this.context.fill();
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

此示例中，arcTo()创建的圆弧为黑色，圆弧的两条切线为灰色。控制点为红色，起始点为绿色。

可以想象两条切线：一条切线从起始点到第一个控制点，另一条切线从第一个控制点到第二个控制点。arcTo()在这两条切线间创建一个圆弧，并使圆弧与这两条切线都相切。

ellipse

ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void

在规定的矩形区域绘制一个椭圆。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
xnumber是椭圆圆心的x轴坐标。默认单位：vp。
ynumber是椭圆圆心的y轴坐标。默认单位：vp。
radiusXnumber是椭圆x轴的半径长度。默认单位：vp。
radiusYnumber是椭圆y轴的半径长度。默认单位：vp。
rotationnumber是椭圆的旋转角度。单位：弧度。
startAnglenumber是椭圆绘制的起始点角度。单位：弧度。
endAnglenumber是椭圆绘制的结束点角度。单位：弧度。
counterclockwiseboolean否是否以逆时针方向绘制椭圆。true:逆时针方向绘制椭圆。false:顺时针方向绘制椭圆。默认值：false。

示例：

// xxx.ets
@Entry
@Component
struct CanvasExample {
  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('#ffff00')
        .onReady(() =>{
          this.context.beginPath()
          this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, false)
          this.context.stroke()
          this.context.beginPath()
          this.context.ellipse(200, 300, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, true)
          this.context.stroke()
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

rect

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

创建矩形路径。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
xnumber是指定矩形的左上角x坐标值。默认单位：vp。
ynumber是指定矩形的左上角y坐标值。默认单位：vp。
wnumber是指定矩形的宽度。默认单位：vp。
hnumber是指定矩形的高度。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct CanvasExample {
  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('#ffff00')
        .onReady(() =>{
          this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
          this.context.stroke()
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

fill

fill(fillRule?: CanvasFillRule): void

对封闭路径进行填充。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
fillRule[CanvasFillRule]否指定要填充对象的规则。可选参数为：“nonzero”, “evenodd”。默认值：“nonzero”。

示例:

// xxx.ets
@Entry
@Component
struct Fill {
  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('#ffff00')
        .onReady(() =>{
          this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
          this.context.fill()
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

fill(path: Path2D, fillRule?: CanvasFillRule): void

对封闭路径进行填充。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
path[Path2D]是Path2D填充路径。
fillRule[CanvasFillRule]否指定要填充对象的规则。可选参数为：“nonzero”, “evenodd”。默认值：“nonzero”。

示例:

// xxx.ets
@Entry
@Component
struct Fill {
  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('#ffff00')
        .onReady(() =>{
          let region = new Path2D()
          region.moveTo(30, 90)
          region.lineTo(110, 20)
          region.lineTo(240, 130)
          region.lineTo(60, 130)
          region.lineTo(190, 20)
          region.lineTo(270, 90)
          region.closePath()
          // Fill path
          this.context.fillStyle = '#00ff00'
          this.context.fill(region, "evenodd")
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

clip

clip(fillRule?: CanvasFillRule): void

设置当前路径为剪切路径。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
fillRule[CanvasFillRule]否指定要剪切对象的规则。可选参数为：“nonzero”, “evenodd”。默认值：“nonzero”。

示例:

// xxx.ets
@Entry
@Component
struct Clip {
  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('#ffff00')
        .onReady(() =>{
          this.context.rect(0, 0, 100, 200)
          this.context.stroke()
          this.context.clip()
          this.context.fillStyle = "rgb(255,0,0)"
          this.context.fillRect(0, 0, 200, 200)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

clip(path: Path2D, fillRule?: CanvasFillRule): void

设置当前路径为剪切路径

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
path[Path2D]是Path2D剪切路径。
fillRule[CanvasFillRule]否指定要剪切对象的规则。可选参数为：“nonzero”, “evenodd”。默认值：“nonzero”。

示例:

// xxx.ets
@Entry
@Component
struct Clip {
  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('#ffff00')
        .onReady(() =>{
          let region = new Path2D()
          region.moveTo(30, 90)
          region.lineTo(110, 20)
          region.lineTo(240, 130)
          region.lineTo(60, 130)
          region.lineTo(190, 20)
          region.lineTo(270, 90)
          region.closePath()
          this.context.clip(region,"evenodd")
          this.context.fillStyle = "rgb(0,255,0)"
          this.context.fillRect(0, 0, this.context.width, this.context.height)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

reset12+

reset(): void

将CanvasRenderingContext2D重置为其默认状态，清除后台缓冲区、绘制状态栈、绘制路径和样式。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

// xxx.ets
@Entry
@Component
struct Reset {
  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('#ffff00')
        .onReady(() =>{
          this.context.fillStyle = '#0000ff'
          this.context.fillRect(20, 20, 150, 100)
          this.context.reset()
          this.context.fillRect(20, 150, 150, 100)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

saveLayer12+

saveLayer(): void

创建一个图层。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

// xxx.ets
@Entry
@Component
struct saveLayer {
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('#ffff00')
      .onReady(() =>{
        this.context.fillStyle = "#0000ff"
        this.context.fillRect(50,100,300,100)
        this.context.fillStyle = "#00ffff"
        this.context.fillRect(50,150,300,100)
        this.context.globalCompositeOperation = 'destination-over'
        this.context.saveLayer()
        this.context.globalCompositeOperation = 'source-over'
        this.context.fillStyle = "#ff0000"
        this.context.fillRect(100,50,100,300)
        this.context.fillStyle = "#00ff00"
        this.context.fillRect(150,50,100,300)
        this.context.restoreLayer()
      })
  }
  .width('100%')
  .height('100%')
}
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

restoreLayer12+

restoreLayer(): void

恢复图像变换和裁剪状态至saveLayer前的状态，并将图层绘制在canvas上。restoreLayer示例代码同saveLayer。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

resetTransform

resetTransform(): void

使用单位矩阵重新设置当前矩阵。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

// xxx.ets
@Entry
@Component
struct ResetTransform {
  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('#ffff00')
        .onReady(() =>{
          this.context.setTransform(1,0.5, -0.5, 1, 10, 10)
          this.context.fillStyle = 'rgb(0,0,255)'
          this.context.fillRect(0, 0, 100, 100)
          this.context.resetTransform()
          this.context.fillStyle = 'rgb(255,0,0)'
          this.context.fillRect(0, 0, 100, 100)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

rotate

rotate(angle: number): void

针对当前坐标轴进行顺时针旋转。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
anglenumber是设置顺时针旋转的弧度值，可以通过 degree * Math.PI / 180 将角度转换为弧度值。单位：弧度。

示例：

// xxx.ets
@Entry
@Component
struct Rotate {
  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('#ffff00')
        .onReady(() =>{
          this.context.rotate(45 * Math.PI / 180)
          this.context.fillRect(70, 20, 50, 50)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

scale

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

设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
xnumber是设置水平方向的缩放值。
ynumber是设置垂直方向的缩放值。

示例：

// xxx.ets
@Entry
@Component
struct Scale {
  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('#ffff00')
        .onReady(() =>{
          this.context.lineWidth = 3
          this.context.strokeRect(30, 30, 50, 50)
          this.context.scale(2, 2) // Scale to 200%
          this.context.strokeRect(30, 30, 50, 50)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

transform

transform(a: number, b: number, c: number, d: number, e: number, f: number): void

transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

说明

变换后的坐标计算方式（x和y为变换前坐标，x’和y’为变换后坐标）：

  • x’ = scaleX * x + skewY * y + translateX
  • y’ = skewX * x + scaleY * y + translateY

参数：

参数名类型必填说明
anumber是scaleX: 指定水平缩放值。
bnumber是skewY: 指定垂直倾斜值。
cnumber是skewX: 指定水平倾斜值。
dnumber是scaleY: 指定垂直缩放值。
enumber是translateX: 指定水平移动值。默认单位：vp。
fnumber是translateY: 指定垂直移动值。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct Transform {
  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('#ffff00')
        .onReady(() =>{
          this.context.fillStyle = 'rgb(0,0,0)'
          this.context.fillRect(0, 0, 100, 100)
          this.context.transform(1, 0.5, -0.5, 1, 10, 10)
          this.context.fillStyle = 'rgb(255,0,0)'
          this.context.fillRect(0, 0, 100, 100)
          this.context.transform(1, 0.5, -0.5, 1, 10, 10)
          this.context.fillStyle = 'rgb(0,0,255)'
          this.context.fillRect(0, 0, 100, 100)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

setTransform

setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void

setTransform方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
anumber是scaleX: 指定水平缩放值。
bnumber是skewY: 指定垂直倾斜值。
cnumber是skewX: 指定水平倾斜值。
dnumber是scaleY: 指定垂直缩放值。
enumber是translateX: 指定水平移动值。默认单位：vp。
fnumber是translateY: 指定垂直移动值。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct SetTransform {
  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('#ffff00')
        .onReady(() =>{
          this.context.fillStyle = 'rgb(255,0,0)'
          this.context.fillRect(0, 0, 100, 100)
          this.context.setTransform(1,0.5, -0.5, 1, 10, 10)
          this.context.fillStyle = 'rgb(0,0,255)'
          this.context.fillRect(0, 0, 100, 100)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

setTransform

setTransform(transform?: Matrix2D): void

以Matrix2D对象为模板重置现有的变换矩阵并创建新的变换矩阵。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
transform[Matrix2D]否变换矩阵。默认值：null。

示例：

// xxx.ets
@Entry
@Component
struct TransFormDemo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.  settings);
  private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('context1');
      Canvas(this.context1)
        .width('230vp')
        .height('160vp')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context1.fillRect(100, 20, 50, 50);
          this.context1.setTransform(1, 0.5, -0.5, 1, 10, 10);
          this.context1.fillRect(100, 20, 50, 50);
        })
      Text('context2');
      Canvas(this.context2)
        .width('230vp')
        .height('160vp')
        .backgroundColor('#0ffff0')
        .onReady(() =>{
          this.context2.fillRect(100, 20, 50, 50);
          let storedTransform = this.context1.getTransform();
          this.context2.setTransform(storedTransform);
          this.context2.fillRect(100, 20, 50, 50);
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

getTransform

getTransform(): Matrix2D

获取当前被应用到上下文的转换矩阵。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

类型说明
[Matrix2D]矩阵对象。

示例：

// xxx.ets
@Entry
@Component
struct TransFormDemo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('context1');
      Canvas(this.context1)
        .width('230vp')
        .height('120vp')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context1.fillRect(50, 50, 50, 50);
          this.context1.setTransform(1.2, Math.PI/8, Math.PI/6, 0.5, 30, -25);
          this.context1.fillRect(50, 50, 50, 50);
        })
      Text('context2');
      Canvas(this.context2)
        .width('230vp')
        .height('120vp')
        .backgroundColor('#0ffff0')
        .onReady(() =>{
          this.context2.fillRect(50, 50, 50, 50);
          let storedTransform = this.context1.getTransform();
          console.log("Matrix [scaleX = " + storedTransform.scaleX + ", scaleY = " + storedTransform.scaleY +
          ", rotateX = " + storedTransform.rotateX + ", rotateY = " + storedTransform.rotateY +
          ", translateX = " + storedTransform.translateX + ", translateY = " + storedTransform.translateY + "]")
          this.context2.setTransform(storedTransform);
          this.context2.fillRect(50,50,50,50);
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

translate

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

移动当前坐标系的原点。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
xnumber是设置水平平移量。默认单位：vp。
ynumber是设置竖直平移量。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct Translate {
  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('#ffff00')
        .onReady(() =>{
          this.context.fillRect(10, 10, 50, 50)
          this.context.translate(70, 70)
          this.context.fillRect(10, 10, 50, 50)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

drawImage

drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void

进行图像绘制。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
image[ImageBitmap]或[PixelMap]是图片资源，请参考ImageBitmap或PixelMap。
dxnumber是绘制区域左上角在x轴的位置。默认单位：vp。
dynumber是绘制区域左上角在y轴的位置。默认单位：vp。

drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void

进行图像绘制。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
image[ImageBitmap]或[PixelMap]是图片资源，请参考ImageBitmap或PixelMap。
dxnumber是绘制区域左上角在x轴的位置。默认单位：vp。
dynumber是绘制区域左上角在y轴的位置。默认单位：vp。
dwnumber是绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。默认单位：vp。
dhnumber是绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。默认单位：vp。

drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void

进行图像绘制。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
image[ImageBitmap]或[PixelMap]是图片资源，请参考ImageBitmap或PixelMap。
sxnumber是裁切源图像时距离源图像左上角的x坐标值。image类型为ImageBitmap时，默认单位：vp。image类型为PixelMap时，单位：px。
synumber是裁切源图像时距离源图像左上角的y坐标值。image类型为ImageBitmap时，默认单位：vp。image类型为PixelMap时，单位：px。
swnumber是裁切源图像时需要裁切的宽度。image类型为ImageBitmap时，默认单位：vp。image类型为PixelMap时，单位：px。
shnumber是裁切源图像时需要裁切的高度。image类型为ImageBitmap时，默认单位：vp。image类型为PixelMap时，单位：px。
dxnumber是绘制区域左上角在x轴的位置。默认单位：vp。
dynumber是绘制区域左上角在y轴的位置。默认单位：vp。
dwnumber是绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。默认单位：vp。
dhnumber是绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct ImageExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private img: ImageBitmap = new ImageBitmap("common/images/example.jpg")

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          this.context.drawImage(this.img, 0, 0)
          this.context.drawImage(this.img, 0, 150, 300, 100)
          this.context.drawImage(this.img, 0, 0, 500, 500, 0, 300, 400, 200)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

createImageData

createImageData(sw: number, sh: number): ImageData

创建新的、空白的、指定大小的ImageData 对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。createImageData示例同putImageData。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
swnumber是ImageData的宽度。默认单位：vp。
shnumber是ImageData的高度。默认单位：vp。

createImageData(imageData: ImageData): ImageData

根据一个现有的ImageData对象重新创建一个宽、高相同的ImageData对象（不会复制图像数据），，该接口存在内存拷贝行为，高耗时，应避免频繁使用。createImageData示例同putImageData。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
imagedata[ImageData]是现有的ImageData对象。

返回值：

类型说明
[ImageData]新的ImageData对象。

getPixelMap

getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap

以当前canvas指定区域内的像素创建[PixelMap]对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
sxnumber是需要输出的区域的左上角x坐标。默认单位：vp。
synumber是需要输出的区域的左上角y坐标。默认单位：vp。
swnumber是需要输出的区域的宽度。默认单位：vp。
shnumber是需要输出的区域的高度。默认单位：vp。

返回值：

类型说明
[PixelMap]新的PixelMap对象。

示例：

// xxx.ets
@Entry
@Component
struct GetPixelMap {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private img: ImageBitmap = new ImageBitmap("common/images/example.jpg")

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          this.context.drawImage(this.img, 100, 100, 130, 130)
          let pixelmap = this.context.getPixelMap(150, 150, 130, 130)
          this.context.setPixelMap(pixelmap)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

setPixelMap

setPixelMap(value?: PixelMap): void

将当前传入[PixelMap]对象绘制在画布上。setPixelMap示例同getPixelMap。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[PixelMap]否包含像素值的PixelMap对象默认值：null。

getImageData

getImageData(sx: number, sy: number, sw: number, sh: number): ImageData

以当前canvas指定区域内的像素创建[ImageData]对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
sxnumber是需要输出的区域的左上角x坐标。默认单位：vp。
synumber是需要输出的区域的左上角y坐标。默认单位：vp。
swnumber是需要输出的区域的宽度。默认单位：vp。
shnumber是需要输出的区域的高度。默认单位：vp。

返回值：

类型说明
[ImageData]新的ImageData对象。

示例：

// xxx.ets
@Entry
@Component
struct GetImageData {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.drawImage(this.img,0,0,130,130)
          let imagedata = this.context.getImageData(50,50,130,130)
          this.context.putImageData(imagedata,150,150)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

putImageData

putImageData(imageData: ImageData, dx: number | string, dy: number | string): void

使用[ImageData]数据填充新的矩形区域。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
imagedata[ImageData]是包含像素值的ImageData对象。
dxnumberstring10+是
dynumberstring10+是

putImageData(imageData: ImageData, dx: number | string, dy: number | string, dirtyX: number | string, dirtyY: number | string, dirtyWidth: number | string, dirtyHeight: number | string): void

使用[ImageData]数据填充新的矩形区域。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
imagedata[ImageData]是包含像素值的ImageData对象。
dxnumberstring10+是
dynumberstring10+是
dirtyXnumberstring10+是
dirtyYnumberstring10+是
dirtyWidthnumberstring10+是
dirtyHeightnumberstring10+是

示例：

// xxx.ets
@Entry
@Component
struct PutImageData {
  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('#ffff00')
        .onReady(() => {
          let imageDataNum = this.context.createImageData(100, 100)
          let imageData = this.context.createImageData(imageDataNum)
          for (let i = 0; i < imageData.data.length; i += 4) {
            imageData.data[i + 0] = 255
            imageData.data[i + 1] = 0
            imageData.data[i + 2] = 255
            imageData.data[i + 3] = 255
          }
          this.context.putImageData(imageData, 10, 10)
          this.context.putImageData(imageData, 150, 10, 0, 0, 50, 50)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

setLineDash

setLineDash(segments: number[]): void

设置画布的虚线样式。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
segmentsnumber[]是描述线段如何交替和线段间距长度的数组。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct SetLineDash {
  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('#ffff00')
        .onReady(() =>{
          this.context.arc(100, 75, 50, 0, 6.28)
          this.context.setLineDash([10,20])
          this.context.stroke()
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

getLineDash

getLineDash(): number[]

获得当前画布的虚线样式。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

类型说明
number[]返回数组，该数组用来描述线段如何交替和间距长度。默认单位：vp。

示例：

// xxx.ets
@Entry
@Component
struct CanvasGetLineDash {
  @State message: string = 'Hello World'
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            console.error('before getlinedash clicked')
            let res = this.context.getLineDash()
            console.error(JSON.stringify(res))
          })
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() => {
            this.context.arc(100, 75, 50, 0, 6.28)
            this.context.setLineDash([10,20])
            this.context.stroke()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

transferFromImageBitmap

transferFromImageBitmap(bitmap: ImageBitmap): void

显示给定的ImageBitmap对象。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
bitmap[ImageBitmap]是待显示的ImageBitmap对象。

示例：

// xxx.ets
@Entry
@Component
struct TransferFromImageBitmap {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          let imageData = this.offContext.createImageData(100, 100)
          for (let i = 0; i < imageData.data.length; i += 4) {
            imageData.data[i + 0] = 255
            imageData.data[i + 1] = 0
            imageData.data[i + 2] = 255
            imageData.data[i + 3] = 255
          }
          this.offContext.putImageData(imageData, 10, 10)
          let image = this.offContext.transferToImageBitmap()
          this.context.transferFromImageBitmap(image)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

toDataURL

toDataURL(type?: string, quality?: any): string

生成一个包含图片展示的URL，该接口存在内存拷贝行为，高耗时，应避免频繁使用。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
typestring否用于指定图像格式。可选参数为：“image/png”, “image/jpeg”, “image/webp”。。默认值：image/png。
qualityany否在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。默认值：0.92。

返回值：

类型说明
string图像的URL地址。

示例：

// xxx.ets
@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State toDataURL: string = ""

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width(100)
        .height(100)
        .onReady(() =>{
          this.context.fillStyle = "#00ff00"
          this.context.fillRect(0,0,100,100)
          this.toDataURL = this.context.toDataURL("image/png", 0.92)
        })
      Text(this.toDataURL)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffff00')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

restore

restore(): void

对保存的绘图上下文进行恢复。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

// xxx.ets
@Entry
@Component
struct CanvasExample {
  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('#ffff00')
        .onReady(() =>{
          this.context.save() // save the default state
          this.context.fillStyle = "#00ff00"
          this.context.fillRect(20, 20, 100, 100)
          this.context.restore() // restore to the default state
          this.context.fillRect(150, 75, 100, 100)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

save

save(): void

将当前状态放入栈中，保存canvas的全部状态，通常在需要保存绘制状态时调用。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

// xxx.ets
@Entry
@Component
struct CanvasExample {
  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('#ffff00')
        .onReady(() =>{
          this.context.save() // save the default state
          this.context.fillStyle = "#00ff00"
          this.context.fillRect(20, 20, 100, 100)
          this.context.restore() // restore to the default state
          this.context.fillRect(150, 75, 100, 100)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

createLinearGradient

createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient

创建一个线性渐变色。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
x0number是起点的x轴坐标。默认单位：vp。
y0number是起点的y轴坐标。默认单位：vp。
x1number是终点的x轴坐标。默认单位：vp。
y1number是终点的y轴坐标。默认单位：vp。

返回值：

类型说明
[CanvasGradient]新的CanvasGradient对象，用于在canvas上创建渐变效果。

示例：

// xxx.ets
@Entry
@Component
struct CreateLinearGradient {
  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('#ffff00')
        .onReady(() =>{
          let grad = this.context.createLinearGradient(50,0, 300,100)
          grad.addColorStop(0.0, '#ff0000')
          grad.addColorStop(0.5, '#ffffff')
          grad.addColorStop(1.0, '#00ff00')
          this.context.fillStyle = grad
          this.context.fillRect(0, 0, 400, 400)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

createRadialGradient

createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient

创建一个径向渐变色。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
x0number是起始圆的x轴坐标。默认单位：vp。
y0number是起始圆的y轴坐标。默认单位：vp。
r0number是起始圆的半径。必须是非负且有限的。默认单位：vp。
x1number是终点圆的x轴坐标。默认单位：vp。
y1number是终点圆的y轴坐标。默认单位：vp。
r1number是终点圆的半径。必须为非负且有限的。默认单位：vp。

返回值：

类型说明
[CanvasGradient]新的CanvasGradient对象，用于在canvas上创建渐变效果。

示例：

// xxx.ets
@Entry
@Component
struct CreateRadialGradient {
  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('#ffff00')
        .onReady(() =>{
          let grad = this.context.createRadialGradient(200,200,50, 200,200,200)
          grad.addColorStop(0.0, '#ff0000')
          grad.addColorStop(0.5, '#ffffff')
          grad.addColorStop(1.0, '#00ff00')
          this.context.fillStyle = grad
          this.context.fillRect(0, 0, 440, 440)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

createConicGradient10+

createConicGradient(startAngle: number, x: number, y: number): CanvasGradient

创建一个圆锥渐变色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
startAnglenumber是开始渐变的角度。角度测量从中心右侧水平开始，顺时针移动。单位：弧度。
xnumber是圆锥渐变的中心x轴坐标。默认单位：vp。
ynumber是圆锥渐变的中心y轴坐标。默认单位：vp。

返回值：

类型说明
[CanvasGradient]新的CanvasGradient对象，用于在canvas上创建渐变效果。

示例：

// xxx.ets
@Entry
@Component
struct CanvasExample {
  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('#ffffff')
        .onReady(() => {
          let grad = this.context.createConicGradient(0, 50, 80)
          grad.addColorStop(0.0, '#ff0000')
          grad.addColorStop(0.5, '#ffffff')
          grad.addColorStop(1.0, '#00ff00')
          this.context.fillStyle = grad
          this.context.fillRect(0, 30, 100, 100)
        })
    }
    .width('100%')
    .height('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

startImageAnalyzer12+

startImageAnalyzer(config: ImageAnalyzerConfig): Promise

配置AI分析并启动AI分析功能，使用前需先[使能]图像AI分析能力。

该方法调用时，将截取调用时刻的画面帧进行分析，使用时需注意启动分析的时机，避免出现画面和分析内容不一致的情况。

未执行完重复调用该方法会触发错误回调。示例代码同stopImageAnalyzer。

说明

分析类型不支持动态修改。

当检测到画面有变化时，分析结果将自动销毁，可重新调用本接口启动分析。

该特性依赖设备能力，不支持该能力的情况下，将返回错误码。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
config[ImageAnalyzerConfig]是执行AI分析所需要的入参，用于配置AI分析功能。

返回值：

类型说明
PromisePromise对象，用于获取AI分析是否成功执行。
错误码ID错误信息
110001AI analysis is unsupported.
110002AI analysis is ongoing.

stopImageAnalyzer12+

stopImageAnalyzer(): void

停止AI分析功能，AI分析展示的内容将被销毁。

说明

在startImageAnalyzer方法未返回结果时调用本方法，会触发其错误回调。

该特性依赖设备能力。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例：

// xxx.ets
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct ImageAnalyzerExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private config: ImageAnalyzerConfig = {
    types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT]
  }
  private img = new ImageBitmap('page/common/test.jpg')
  private aiController: ImageAnalyzerController = new ImageAnalyzerController()
  private options: ImageAIOptions = {
    types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT],
    aiController: this.aiController
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('start')
        .width(80)
        .height(80)
        .onClick(() => {
          this.context.startImageAnalyzer(this.config)
            .then(() => {
              console.log("analysis complete")
            })
            .catch((error: BusinessError) => {
              console.log("error code: " + error.code)
            })
        })
      Button('stop')
        .width(80)
        .height(80)
        .onClick(() => {
          this.context.stopImageAnalyzer()
        })
      Button('getTypes')
        .width(80)
        .height(80)
        .onClick(() => {
          this.aiController.getImageAnalyzerSupportTypes()
        })
      Canvas(this.context, this.options)
        .width(200)
        .height(200)
        .enableAnalyzer(true)
        .onReady(() => {
          this.context.drawImage(this.img, 0, 0, 200, 200)
        })
    }
    .width('100%')
    .height('100%')
  }
}

CanvasDirection

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

类型说明
inherit继承canvas组件通用属性已设定的文本方向。
ltr从左往右。
rtl从右往左。

CanvasFillRule

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

类型说明
evenodd奇偶规则。
nonzero非零规则。

CanvasLineCap

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

类型说明
butt线条两端为平行线，不额外扩展。
round在线条两端延伸半个圆，直径等于线宽。
square在线条两端延伸一个矩形，宽度等于线宽的一半，高度等于线宽。

CanvasLineJoin

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

类型说明
bevel在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
miter在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
round在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。

CanvasTextAlign

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

类型说明
center文本居中对齐。
start文本对齐界线开始的地方。
end文本对齐界线结束的地方。
left文本左对齐。
right文本右对齐。

CanvasTextBaseline

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

类型说明
alphabetic文本基线是标准的字母基线。
bottom文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。
hanging文本基线是悬挂基线。
ideographic文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
middle文本基线在文本块的中间。
top文本基线在文本块的顶部。

ImageSmoothingQuality

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

类型说明
low低画质
medium中画质
high高画质

TextMetrics

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型只读可选说明
widthnumber是否只读属性，文本方块的宽度。
heightnumber是否只读属性，文本方块的高度。
actualBoundingBoxAscentnumber是否只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到渲染文本的矩形边界顶部的距离。
actualBoundingBoxDescentnumber是否只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到渲染文本的矩形边界底部的距离。
actualBoundingBoxLeftnumber是否只读属性，平行于基线，从[CanvasRenderingContext2D.textAlign]属性确定的对齐点到文本矩形边界左侧的距离。
actualBoundingBoxRightnumber是否只读属性，平行于基线，从[CanvasRenderingContext2D.textAlign]属性确定的对齐点到文本矩形边界右侧的距离。
alphabeticBaselinenumber是否只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到线框的 alphabetic 基线的距离。
emHeightAscentnumber是否只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到线框中 em 方块顶部的距离。
emHeightDescentnumber是否只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到线框中 em 方块底部的距离。
fontBoundingBoxAscentnumber是否只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离。
fontBoundingBoxDescentnumber是否只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离。
hangingBaselinenumber是否只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到线框的 hanging 基线的距离。
ideographicBaselinenumber是否只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到线框的 ideographic 基线的距离。

据悉，目前已有超过5000款应用启动了原生鸿蒙开发，而华为设定的目标是支持50万+应用。这一目标的实现，将直接催生百万级的人才缺口，为市场带来超过300万个潜在新就业岗位。
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

避免浪费时间！！新入门的人在学习鸿蒙的过程，通常会在网上搜索资料；但几乎都是七零八碎比较杂乱，而官网的文档比较笼统。这无疑增加了时间成本。对此录制了一套鸿蒙基础进阶视频（HarmonyOS NEXT）开发入门&实战教学视频（200集+）

《鸿蒙 (HarmonyOS NEXT)开发入门&实战教学视频》←嗱娶

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

另外还根据鸿蒙官方发布的文档结合华为内部人员分享，经过反复修改整理得出的一整套鸿蒙南北向（HarmonyOS NEXT）学习手册（共计3000页+）想要进阶鸿蒙的开发者有福了！

内容包含了：（ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战）等技术知识点。帮助大家在学习鸿蒙路上少走弯路！

《鸿蒙 (HarmonyOS NEXT)南北向开发基础与实战手册》←嗱娶
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

华为鸿蒙——作为新“红海”的技术方向，一个正处在高速发展前期的技术领域，时间来到今年6月，在华为HDC 2024中；全栈自研鸿蒙NEXT（Beta内测）登场，到如今8月的（Beta3版）全面开放。真正做到了那四个字“遥遥领先”！

鸿蒙作为新技术，目前懂的人很少；像这样的领域，往往需求大，但符合需求的技术人才却少，供小于求，自然竞争没有那么激烈。且会有更优厚的薪酬。

鸿蒙5.0版开发：ArkTS绘制组件（Line）
m0_69424697的博客
09-30 1190
直线绘制组件。
Canvas API-CanvasRenderingContext2D (下）
yuanhongkun的博客
05-12 439
CanvasRenderingContext2D接口还有很多属性和相关方法，这就不一一介绍了。CanvasRenderingContext2D - Web API 接口参考 | MDN (mozilla.org)
鸿蒙next开发：UI开发-CanvasRenderingContext2D对象
qq_39652397的博客
05-26 753
本文介绍了鸿蒙HarmonyOS中Canvas画布组件的使用方法，包括绘制线段、图形、文本、图片等。
Canvas API-CanvasRenderingContext2D相关学习（上）
yuanhongkun的博客
05-10 823
提供了一个通过JavaScript的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的WebGL API则用于绘制硬件加速的 2D 和 3D 图形。它与 SVG 图像的区别在于，<canvas>是脚本调用各种方法生成图像，SVG 则是一个 XML 文件，通过各种子元素生成图像。使用 Canvas API 之前，需要在网页里面新建一个<canvas>元素。</
鸿蒙画布组件：【CanvasRenderingContext2D对象】 接口与属性
2401_82772199的博客
07-19 1628
使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
canvas学习之路第二档CanvasRenderingContext2D对象相关api的方法系列
sassssiii的博客
06-05 281
canvas方法Api的使用
鸿蒙OpenHarmony【CanvasRenderingContext2D接口和属性】画布绘制
asfn123123的博客
11-14 845
使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。
鸿蒙OpenHarmony【DrawingRenderingContext】画布绘制
asfn123123的博客
11-14 1079
ImageBitmap对象可以存储canvas渲染的像素数据。
HarmonyOS应用开发：CanvasRenderingContext2D（画布组件）
situnanQAQ的博客
06-21 1019
使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。
鸿蒙OpenHarmony【OffscreenCanvas】画布绘制
asfn123123的博客
11-15 830
OffscreenCanvas组件用于自定义绘制图形。 使用[Canvas]组件或[Canvas API]时，渲染、动画和用户交互通常发生在应用程序的主线程上，与画布动画和渲染相关的计算可能会影响应用程序性能。OffscreenCanvas提供了一个可以在屏幕外渲染的画布，这样可以在单独的线程中运行一些任务，从而避免影响应用程序主线程性能。
【canvas】canvas基础使用（三）：快速绘制矩形方法
qq_2511276124的博客
04-10 2841
canvas实现了快速绘制矩形的方法。
使用画布绘制自定义图形（Canvas）
01-15 2596
使用CanvasRenderingContext2D对象在Canvas画布上绘制。@Entry@Component//用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。//用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。build() {//在canvas中调用CanvasRenderingContext2D对象。
鸿蒙Harmony-矩形绘制组件Rect使用详解
袁震的博客
10-31 1671
Rect是鸿蒙提供的矩形绘制组件，利用该组件可以绘制矩形背景，矩形图案等官方提供的参数和属性：参数名参数类型必填默认值参数描述width否0宽度。异常值按照默认值处理。height否0高度。异常值按照默认值处理。radius否0圆角半径，支持分别设置四个角的圆角度数。该属性和radiusWidth/radiusHeight属性效果类似，在组合使用时优先于radiusWidth/radiusHeight生效异常值按照默认值处理。否0圆角宽度。
OpenHarmony实战开发-如何实现进入页面，点击动画卡片，动画播放并且文本发生变化。
m0_70749039的博客
04-17 906
Lottie是一个适用于OpenHarmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染， 可以在各种屏幕尺寸和分辨率上呈现，并且支持动画的交互性，通过添加触摸事件或其他用户交互操作，使动画更加生动和具有响应性。
HarmonyOS-Canvas画布组件
xue2464874018的博客
08-04 523
本文依赖文章，讲解了harmonyOS的Canvas的使用，在内容上做了一定的精简，完整学习Canvas建议点击链接。
fabric.js canvas 更新画布内容踩坑，清空画布重绘，fabric出现闪屏
weixin_45782529的博客
12-03 3494
需求：不断绘制图片、图形、文字等内容，达到实时视频效果。思路：在使用fabric操作canvas，获取到新数据时先clear()清除画布内容，再add()绘制新的数据内容到画布上达到实时更新效果.效果：更新内容时会出现闪屏 原因：clear()函数使用位置不对，解决方法：clear()必须用在img.onload = () => {}函数之内，且add()绘画函数之前，就可以解决闪屏现象，放add()之后代表函数先执行add()绘制画布，再执行clear()清除画布内容,造成页面没有图像。在mounted中
Android 刷新、重绘 画布
Wyndem的博客
03-13 7614
Android 刷新、重绘 画布 吐槽 在自定义View中，如果你需要重绘画布达到动态的效果，你的第一个想法是在onDraw方法中把canvas画布对象拿出来，可是你会发现，拿出来的对象是Null，不管你怎么赋值都没用，这可能也是你找到这帖子的原因。 正题 如果需要动态的更换画布，首先你需要将里面的数据写到随时能调用的地方，比如说全局变量。 重写 invalidate方法 ...
UGUI源码分析：CanvasUpdateSystem 画布刷新系统
vin129的博客
04-25 5404
CanvasUpdateSystem Related Class: Canvas、CanvasUpdateRegistry、ClipperRegistry Related Interface: ICanvasElement Related Other: Enum CanvasUpdate Intro: 由Canvas控制，通过 ICanvasElement 接口，使用脏标记方法来统一更新Ca...
鸿蒙canvas有没有接触过？
最新发布
06-19
<think>我们正在讨论鸿蒙系统中的Canvas组件。根据用户的问题，他想要了解Canvas的使用教程或功能介绍。结合引用内容，特别是引用[3]中提到了使用ArkTS中的canvas实现签名板功能，包括旋转屏幕等操作，我们可以围绕这个方向展开。首先，Canvas是鸿蒙系统（HarmonyOS）中用于绘制图形的一个重要组件，它属于ArkUI的一部分。通过Canvas，开发者可以在画布上绘制各种形状、文本、图像等，并且支持变换（如旋转、缩放、平移）和事件处理。接下来，我将介绍Canvas的基本使用方法，包括创建Canvas、绘制基本图形以及实现一些高级功能（如签名板）的步骤。###1.创建Canvas组件在ArkTS中，我们可以在UI中直接使用Canvas组件，并设置其宽度和高度。```typescript@ComponentstructCanvasExample{build(){Column(){Canvas().width(&#39;100%&#39;).height(&#39;100%&#39;).backgroundColor(&#39;#ffff00&#39;)//背景色.onReady((canvas:CanvasRenderingContext2D)=>{//当画布准备好时触发//在这里进行绘制操作})}}}```###2.绘制基本图形在Canvas的`onReady`回调中，我们可以获取到`CanvasRenderingContext2D`对象，该对象提供了各种绘制方法。####绘制矩形```typescript.onReady((ctx:CanvasRenderingContext2D)=>{ctx.fillStyle=&#39;#ff0000&#39;;//设置填充颜色ctx.fillRect(50,50,100,100);//绘制矩形（x,y,width,height）})```####绘制路径（直线）```typescriptctx.beginPath();//开始路径ctx.moveTo(100,100);//起点ctx.lineTo(200,200);//终点ctx.stroke();//描边```####绘制圆形```typescriptctx.beginPath();ctx.arc(150,150,50,0,2*Math.PI);//圆心(x,y),半径,起始角,终止角ctx.fillStyle=&#39;#00ff00&#39;;ctx.fill();```###3.实现签名板功能引用[3]提到使用Canvas实现签名板，其中旋转屏幕是一个功能点。在签名板中，我们通常需要处理触摸事件来绘制路径。####基本步骤：1.创建Canvas并设置触摸事件2.记录触摸路径的点3.在触摸移动时绘制路径4.实现清除功能```typescript@ComponentstructSignaturePad{privatepoints:Array<Point>=[];//存储触摸点privateisDrawing:boolean=false;//是否正在绘制build(){Column(){Canvas().width(&#39;100%&#39;).height(300).backgroundColor(&#39;#ffffff&#39;).onReady((ctx:CanvasRenderingContext2D)=>{//保存上下文引用，以便在事件中使用this.ctx=ctx;}).onTouch((event:TouchEvent)=>{if(event.type===TouchType.Down){this.isDrawing=true;this.points=[];//开始新的路径this.points.push({x:event.touches[0].x,y:event.touches[0].y});}elseif(event.type===TouchType.Move&&this.isDrawing){this.points.push({x:event.touches[0].x,y:event.touches[0].y});this.drawPath();//绘制路径}elseif(event.type===TouchType.Up){this.isDrawing=false;}})//清除按钮Button(&#39;清除&#39;).onClick(()=>{this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);})}}privatedrawPath(){if(this.points.length<2)return;this.ctx.beginPath();this.ctx.lineWidth=2;this.ctx.strokeStyle=&#39;#000000&#39;;this.ctx.lineCap=&#39;round&#39;;//圆角线帽//从第一个点开始this.ctx.moveTo(this.points[0].x,this.points[0].y);//连接后续点for(leti=1;i<this.points.length;i++){this.ctx.lineTo(this.points[i].x,this.points[i].y);}this.ctx.stroke();}}interfacePoint{x:number;y:number;}```####旋转屏幕在鸿蒙系统中，我们可以通过设置屏幕方向来实现旋转。例如，在配置文件（config.json）中设置：```json{"module":{//..."abilities":[{"orientation":"unspecified"//可以旋转//或者指定方向：landscape,portrait,etc.}]}}```或者通过代码动态设置屏幕方向：```typescriptimportwindowfrom&#39;@ohos.window&#39;;//获取当前窗口并设置方向letwindowClass=window.getLastWindow(this.context);windowClass.setPreferredOrientation(window.Orientation.LANDSCAPE);//设置为横屏```###总结Canvas在鸿蒙系统中是一个功能强大的绘图组件，可以用于绘制各种图形、创建自定义控件（如签名板）等。通过处理触摸事件，我们可以实现交互式绘图。此外，Canvas还支持变换（旋转、缩放、平移）和图像处理等功能[^3]。§§相关问题§§1.Canvas在鸿蒙系统中支持哪些图像处理操作？2.如何将Canvas绘制的图形保存为图片？3.鸿蒙系统中Canvas的性能如何优化？</think>### 鸿蒙系统 Canvas 功能介绍与使用教程 鸿蒙（HarmonyOS）中的 Canvas 组件是 ArkUI 的核心绘图工具，用于实现自定义图形绘制、动画和交互式界面（如签名板、图表、游戏等）。以下是关键功能和使用方法： --- #### **一、Canvas 核心功能** 1. **基础绘图** - 支持绘制形状：矩形、圆形、路径、文本、图像等。 - 支持样式控制：颜色填充（`fillStyle`）、描边（`strokeStyle`）、透明度（`globalAlpha`）。 - 示例代码（ArkTS）： ```typescript @Component struct CanvasDemo { build() { Canvas() .width(&#39;100%&#39;) .height(200) .onReady((ctx: CanvasRenderingContext2D) => { // 绘制蓝色矩形 ctx.fillStyle = &#39;#3498db&#39;; ctx.fillRect(20, 20, 150, 100); // 绘制红色圆形 ctx.beginPath(); ctx.arc(250, 70, 40, 0, 2 * Math.PI); ctx.strokeStyle = &#39;#e74c3c&#39;; ctx.stroke(); }) } } ``` 2. **图形变换** - **旋转/缩放/平移**：通过 `rotate()`, `scale()`, `translate()` 实现。 - **签名板旋转屏幕**（引用[3]）： - 在 Canvas 上叠加手势监听，动态调整坐标系。 - 示例：横屏时重绘路径并应用旋转变换矩阵。 3. **图像处理** - 加载并绘制图片：`drawImage(image, dx, dy)`。 - 像素级操作：通过 `ImageData` 获取/修改像素数据。 4. **动画实现** - 使用 `requestAnimationFrame` 循环重绘： ```typescript let angle = 0; const animate = () => { ctx.clearRect(0, 0, width, height); // 清空画布 ctx.save(); ctx.translate(100, 100); ctx.rotate(angle); ctx.fillRect(-25, -25, 50, 50); // 旋转的矩形 ctx.restore(); angle += 0.05; requestAnimationFrame(animate); }; animate(); ``` --- #### **二、签名板实战教程** 基于引用[3]实现 Canvas 签名板功能： 1. **绘制签名路径** ```typescript @Component struct SignaturePad { private points: Array<Point> = []; private isDrawing: boolean = false; build() { Canvas() .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { this.isDrawing = true; this.points = [{ x: event.touches[0].x, y: event.touches[0].y }]; } else if (event.type === TouchType.Move && this.isDrawing) { this.points.push({ x: event.touches[0].x, y: event.touches[0].y }); this.drawPath(); // 实时绘制路径 } else { this.isDrawing = false; } }) } private drawPath(ctx: CanvasRenderingContext2D) { ctx.beginPath(); ctx.lineWidth = 3; ctx.lineCap = &#39;round&#39;; ctx.moveTo(this.points[0].x, this.points[0].y); for (let i = 1; i < this.points.length; i++) { ctx.lineTo(this.points[i].x, this.points[i].y); } ctx.stroke(); } } ``` 2. **旋转屏幕适配**（引用[3]） - **方法1**：监听屏幕方向变化，重置 Canvas 宽高： ```typescript import window from &#39;@ohos.window&#39;; // 获取窗口对象并监听旋转 window.getLastWindow(this.context).then((win) => { win.on(&#39;orientationChange&#39;, (newOrientation) => { // 重新设置Canvas尺寸并重绘签名 }); }); ``` - **方法2**：通过 CSS 媒体查询动态调整布局。 --- #### **三、学习资源推荐** 1. **官方文档** - [Canvas API 参考](https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-components-canvas-canvas-0000001118351456)（详细参数说明）。 2. **系统教程**（引用[1][2]） - 《HarmonyOS教学视频》：包含 ArkTS 语法、Canvas 实战案例等[^2]。 - 《OpenHarmony学习手册》：1236页系统教程，涵盖资源管理、动画优化等[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值