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

东湖之滨 · 2025-3-10 23:22:10

方法

以下方法在隐藏页面中调用会产生缓存，应避免在隐藏页面中频繁革新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版）全面开放。真正做到了那四个字“遥遥领先”！
鸿蒙作为新技术，目前懂的人很少；像如许的领域，每每需求大，但符合需求的技术人才却少，供小于求，自然竞争没有那么激烈。且会有更优厚的薪酬。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块