鸿蒙OpenHarmony【CanvasRenderingContext2D方法】画布绘制
以下方法在隐藏页面中调用会产生缓存，应避免在隐藏页面中频繁刷新Canvas。
方法
以下方法在隐藏页面中调用会产生缓存，应避免在隐藏页面中频繁刷新Canvas。
fillRect
fillRect(x: number, y: number, w: number, h: number): void
填充一个矩形。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x | number | 是 | 指定矩形左上角点的x坐标。默认单位：vp。 |
| y | number | 是 | 指定矩形左上角点的y坐标。默认单位：vp。 |
| w | number | 是 | 指定矩形的宽度。默认单位：vp。 |
| h | number | 是 | 指定矩形的高度。默认单位：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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x | number | 是 | 指定矩形的左上角x坐标。默认单位：vp。 |
| y | number | 是 | 指定矩形的左上角y坐标。默认单位：vp。 |
| w | number | 是 | 指定矩形的宽度。默认单位：vp。 |
| h | number | 是 | 指定矩形的高度。默认单位：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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x | number | 是 | 指定矩形上的左上角x坐标。默认单位：vp。 |
| y | number | 是 | 指定矩形上的左上角y坐标。默认单位：vp。 |
| w | number | 是 | 指定矩形的宽度。默认单位：vp。 |
| h | number | 是 | 指定矩形的高度。默认单位：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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| text | string | 是 | 需要绘制的文本内容。 |
| x | number | 是 | 需要绘制的文本的左下角x坐标。默认单位：vp。 |
| y | number | 是 | 需要绘制的文本的左下角y坐标。默认单位：vp。 |
| maxWidth | number | 否 | 指定文本允许的最大宽度。默认单位：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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| text | string | 是 | 需要绘制的文本内容。 |
| x | number | 是 | 需要绘制的文本的左下角x坐标。默认单位：vp。 |
| y | number | 是 | 需要绘制的文本的左下角y坐标。默认单位：vp。 |
| maxWidth | number | 否 | 需要绘制的文本的最大宽度。默认单位：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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| text | string | 是 | 需要进行测量的文本。 |
返回值：
| 类型 | 说明 |
|---|---|
| [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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x | number | 是 | 指定位置的x坐标。默认单位：vp。 |
| y | number | 是 | 指定位置的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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x | number | 是 | 指定位置的x坐标。默认单位：vp。 |
| y | number | 是 | 指定位置的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对象。 |
| repetition | string | null | 是 |
返回值：
| 类型 | 说明 |
|---|---|
| [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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| cp1x | number | 是 | 第一个贝塞尔参数的x坐标值。默认单位：vp。 |
| cp1y | number | 是 | 第一个贝塞尔参数的y坐标值。默认单位：vp。 |
| cp2x | number | 是 | 第二个贝塞尔参数的x坐标值。默认单位：vp。 |
| cp2y | number | 是 | 第二个贝塞尔参数的y坐标值。默认单位：vp。 |
| x | number | 是 | 路径结束时的x坐标值。默认单位：vp。 |
| y | number | 是 | 路径结束时的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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| cpx | number | 是 | 贝塞尔参数的x坐标值。默认单位：vp。 |
| cpy | number | 是 | 贝塞尔参数的y坐标值。默认单位：vp。 |
| x | number | 是 | 路径结束时的x坐标值。默认单位：vp。 |
| y | number | 是 | 路径结束时的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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x | number | 是 | 弧线圆心的x坐标值。默认单位：vp。 |
| y | number | 是 | 弧线圆心的y坐标值。默认单位：vp。 |
| radius | number | 是 | 弧线的圆半径。默认单位：vp。 |
| startAngle | number | 是 | 弧线的起始弧度。单位：弧度 |
| endAngle | number | 是 | 弧线的终止弧度。单位：弧度 |
| counterclockwise | boolean | 否 | 是否逆时针绘制圆弧。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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x1 | number | 是 | 第一个控制点的x坐标值。默认单位：vp。 |
| y1 | number | 是 | 第一个控制点的y坐标值。默认单位：vp。 |
| x2 | number | 是 | 第二个控制点的x坐标值。默认单位：vp。 |
| y2 | number | 是 | 第二个控制点的y坐标值。默认单位：vp。 |
| radius | number | 是 | 圆弧的圆半径值。默认单位：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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x | number | 是 | 椭圆圆心的x轴坐标。默认单位：vp。 |
| y | number | 是 | 椭圆圆心的y轴坐标。默认单位：vp。 |
| radiusX | number | 是 | 椭圆x轴的半径长度。默认单位：vp。 |
| radiusY | number | 是 | 椭圆y轴的半径长度。默认单位：vp。 |
| rotation | number | 是 | 椭圆的旋转角度。单位：弧度。 |
| startAngle | number | 是 | 椭圆绘制的起始点角度。单位：弧度。 |
| endAngle | number | 是 | 椭圆绘制的结束点角度。单位：弧度。 |
| counterclockwise | boolean | 否 | 是否以逆时针方向绘制椭圆。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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x | number | 是 | 指定矩形的左上角x坐标值。默认单位：vp。 |
| y | number | 是 | 指定矩形的左上角y坐标值。默认单位：vp。 |
| w | number | 是 | 指定矩形的宽度。默认单位：vp。 |
| h | number | 是 | 指定矩形的高度。默认单位：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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| angle | number | 是 | 设置顺时针旋转的弧度值，可以通过 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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x | number | 是 | 设置水平方向的缩放值。 |
| y | number | 是 | 设置垂直方向的缩放值。 |
示例：
// 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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| a | number | 是 | scaleX: 指定水平缩放值。 |
| b | number | 是 | skewY: 指定垂直倾斜值。 |
| c | number | 是 | skewX: 指定水平倾斜值。 |
| d | number | 是 | scaleY: 指定垂直缩放值。 |
| e | number | 是 | translateX: 指定水平移动值。默认单位：vp。 |
| f | number | 是 | 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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| a | number | 是 | scaleX: 指定水平缩放值。 |
| b | number | 是 | skewY: 指定垂直倾斜值。 |
| c | number | 是 | skewX: 指定水平倾斜值。 |
| d | number | 是 | scaleY: 指定垂直缩放值。 |
| e | number | 是 | translateX: 指定水平移动值。默认单位：vp。 |
| f | number | 是 | 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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x | number | 是 | 设置水平平移量。默认单位：vp。 |
| y | number | 是 | 设置竖直平移量。默认单位：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。 |
| dx | number | 是 | 绘制区域左上角在x轴的位置。默认单位：vp。 |
| dy | number | 是 | 绘制区域左上角在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。 |
| dx | number | 是 | 绘制区域左上角在x轴的位置。默认单位：vp。 |
| dy | number | 是 | 绘制区域左上角在y轴的位置。默认单位：vp。 |
| dw | number | 是 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。默认单位：vp。 |
| dh | number | 是 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。默认单位：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。 |
| sx | number | 是 | 裁切源图像时距离源图像左上角的x坐标值。image类型为ImageBitmap时，默认单位：vp。image类型为PixelMap时，单位：px。 |
| sy | number | 是 | 裁切源图像时距离源图像左上角的y坐标值。image类型为ImageBitmap时，默认单位：vp。image类型为PixelMap时，单位：px。 |
| sw | number | 是 | 裁切源图像时需要裁切的宽度。image类型为ImageBitmap时，默认单位：vp。image类型为PixelMap时，单位：px。 |
| sh | number | 是 | 裁切源图像时需要裁切的高度。image类型为ImageBitmap时，默认单位：vp。image类型为PixelMap时，单位：px。 |
| dx | number | 是 | 绘制区域左上角在x轴的位置。默认单位：vp。 |
| dy | number | 是 | 绘制区域左上角在y轴的位置。默认单位：vp。 |
| dw | number | 是 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。默认单位：vp。 |
| dh | number | 是 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。默认单位：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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| sw | number | 是 | ImageData的宽度。默认单位：vp。 |
| sh | number | 是 | 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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| sx | number | 是 | 需要输出的区域的左上角x坐标。默认单位：vp。 |
| sy | number | 是 | 需要输出的区域的左上角y坐标。默认单位：vp。 |
| sw | number | 是 | 需要输出的区域的宽度。默认单位：vp。 |
| sh | number | 是 | 需要输出的区域的高度。默认单位：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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| sx | number | 是 | 需要输出的区域的左上角x坐标。默认单位：vp。 |
| sy | number | 是 | 需要输出的区域的左上角y坐标。默认单位：vp。 |
| sw | number | 是 | 需要输出的区域的宽度。默认单位：vp。 |
| sh | number | 是 | 需要输出的区域的高度。默认单位：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对象。 |
| dx | number | string10+ | 是 |
| dy | number | string10+ | 是 |
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对象。 |
| dx | number | string10+ | 是 |
| dy | number | string10+ | 是 |
| dirtyX | number | string10+ | 是 |
| dirtyY | number | string10+ | 是 |
| dirtyWidth | number | string10+ | 是 |
| dirtyHeight | number | string10+ | 是 |
示例：
// 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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| segments | number[] | 是 | 描述线段如何交替和线段间距长度的数组。默认单位：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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| type | string | 否 | 用于指定图像格式。可选参数为：“image/png”, “image/jpeg”, “image/webp”。。默认值：image/png。 |
| quality | any | 否 | 在指定图片格式为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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x0 | number | 是 | 起点的x轴坐标。默认单位：vp。 |
| y0 | number | 是 | 起点的y轴坐标。默认单位：vp。 |
| x1 | number | 是 | 终点的x轴坐标。默认单位：vp。 |
| y1 | number | 是 | 终点的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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| x0 | number | 是 | 起始圆的x轴坐标。默认单位：vp。 |
| y0 | number | 是 | 起始圆的y轴坐标。默认单位：vp。 |
| r0 | number | 是 | 起始圆的半径。必须是非负且有限的。默认单位：vp。 |
| x1 | number | 是 | 终点圆的x轴坐标。默认单位：vp。 |
| y1 | number | 是 | 终点圆的y轴坐标。默认单位：vp。 |
| r1 | number | 是 | 终点圆的半径。必须为非负且有限的。默认单位：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
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| startAngle | number | 是 | 开始渐变的角度。角度测量从中心右侧水平开始，顺时针移动。单位：弧度。 |
| x | number | 是 | 圆锥渐变的中心x轴坐标。默认单位：vp。 |
| y | number | 是 | 圆锥渐变的中心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分析功能。 |
返回值：
| 类型 | 说明 |
|---|---|
| Promise | Promise对象，用于获取AI分析是否成功执行。 |
| 错误码ID | 错误信息 |
|---|---|
| 110001 | AI analysis is unsupported. |
| 110002 | AI 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
| 名称 | 类型 | 只读 | 可选 | 说明 |
|---|---|---|---|---|
| width | number | 是 | 否 | 只读属性，文本方块的宽度。 |
| height | number | 是 | 否 | 只读属性，文本方块的高度。 |
| actualBoundingBoxAscent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到渲染文本的矩形边界顶部的距离。 |
| actualBoundingBoxDescent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到渲染文本的矩形边界底部的距离。 |
| actualBoundingBoxLeft | number | 是 | 否 | 只读属性，平行于基线，从[CanvasRenderingContext2D.textAlign]属性确定的对齐点到文本矩形边界左侧的距离。 |
| actualBoundingBoxRight | number | 是 | 否 | 只读属性，平行于基线，从[CanvasRenderingContext2D.textAlign]属性确定的对齐点到文本矩形边界右侧的距离。 |
| alphabeticBaseline | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到线框的 alphabetic 基线的距离。 |
| emHeightAscent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到线框中 em 方块顶部的距离。 |
| emHeightDescent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到线框中 em 方块底部的距离。 |
| fontBoundingBoxAscent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离。 |
| fontBoundingBoxDescent | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离。 |
| hangingBaseline | number | 是 | 否 | 只读属性，从[CanvasRenderingContext2D.textBaseline]属性标明的水平线到线框的 hanging 基线的距离。 |
| ideographicBaseline | number | 是 | 否 | 只读属性，从[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版）全面开放。真正做到了那四个字“遥遥领先”！
鸿蒙作为新技术，目前懂的人很少；像这样的领域，往往需求大，但符合需求的技术人才却少，供小于求，自然竞争没有那么激烈。且会有更优厚的薪酬。
社区规范：仅讨论OpenHarmony相关问题。
更多推荐
27
0- 0
已为社区贡献26条内容
所有评论(0)