diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md
index d9963afc59a3885e215f1b64d9167ce6faea7e2d..76892a0d0ce6e0daea11289fb82a4a9bab9564a9 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md
@@ -565,3 +565,23 @@
| ------- | ------------------------------------------------------------ |
| DEFAULT | 默认风格，光标宽1.5vp，光标高度与文本选中底板高度和字体大小相关。 |
| INLINE | 内联输入风格。文本选中底板高度与输入框高度相同。 |
+
+## ImageSmoothingQuality8+
+
+从API version 9开始，该接口支持在ArkTS卡片中使用。
+
+| 名称 | 描述 |
+| -------- | -------------- |
+| low | 低画质 |
+| medium | 中画质 |
+| high | 高画质 |
+
+## CanvasDirection8+
+
+从API version 9开始，该接口支持在ArkTS卡片中使用。
+
+| 名称 | 描述 |
+| -------- | -------------- |
+| inherit | 继承canvas组件已设定的文本方向 |
+| ltr | 从左往右 |
+| rtl | 从右往左 |
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index cf4a76859576bab80b452fc8d8b1958f59f291b0..e7aaef536d6ccab15f425f89b0c74274d0de6495 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -59,8 +59,8 @@ RenderingContextSettings(antialias?: boolean)
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。
默认值：true
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [height](#height) | number | 组件高度。
单位：vp
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [width](#width) | number | 组件宽度。
单位：vp
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| [imageSmoothingQuality](#imagesmoothingquality) | ImageSmoothingQuality | imageSmoothingEnabled为true时，用于设置图像平滑度。可选值为：
- 'low'：低画质
- 'medium'：中画质
- 'high'：高画质。
默认值：low
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| [direction](#direction) | CanvasDirection | 用于设置绘制文字时使用的文字方向。可选值为：
- 'inherit'：继承canvas组件已设定的文本方向
- 'ltr'：从左往右
- 'rtl'：从右往左。
默认值：inherit
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| [imageSmoothingQuality](#imagesmoothingquality) |[ImageSmoothingQuality](ts-appendix-enums.md#imagesmoothingquality8) | imageSmoothingEnabled为true时，用于设置图像平滑度。
默认值：ImageSmoothingQuality.low
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| [direction](#direction) | [CanvasDirection](ts-appendix-enums.md#canvasdirection8) | 用于设置绘制文字时使用的文字方向。
默认值：CanvasDirection.inherit
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [filter](#filter) | string | 用于设置图像的滤镜。支持的滤镜效果如下：
- 'none': 无滤镜效果
- 'blur'：给图像设置高斯模糊
- 'brightness'：给图片应用一种线性乘法，使其看起来更亮或更暗
- 'contrast'：调整图像的对比度
- 'grayscale'：将图像转换为灰度图像
- 'hue-rotate'：给图像应用色相旋转
- 'invert'：反转输入图像
- 'opacity'：转化图像的透明程度
- 'saturate'：转换图像饱和度
- 'sepia'：将图像转换为深褐色
默认值：'none'
从API version 9开始，该接口支持在ArkTS卡片中使用。 |
> **说明：**
@@ -719,6 +719,136 @@ struct WidthExample {
+### imageSmoothingQuality
+
+```ts
+ // xxx.ets
+ @Entry
+ @Component
+ struct ImageSmoothingQualityDemo {
+ 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(() =>{
+ let ctx = this.context
+ ctx.imageSmoothingEnabled = true
+ ctx.imageSmoothingQuality = 'high'
+ ctx.drawImage(this.img, 0, 0, 400, 200)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+```
+
+
+
+
+### direction
+
+```ts
+ // xxx.ets
+ @Entry
+ @Component
+ struct DirectionDemo {
+ 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 ctx = this.context
+ ctx.font = '48px serif';
+ ctx.textAlign = 'start'
+ ctx.fillText("Hi ltr!", 200, 50);
+
+ ctx.direction = "rtl";
+ ctx.fillText("Hi rtl!", 200, 100);
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+```
+
+
+
+
+### filter
+
+```ts
+ // xxx.ets
+ @Entry
+ @Component
+ struct FilterDemo {
+ 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(() =>{
+ let ctx = this.context
+ let img = this.img
+
+ ctx.drawImage(img, 0, 0, 100, 100);
+
+ ctx.filter = 'grayscale(50%)';
+ ctx.drawImage(img, 100, 0, 100, 100);
+
+ ctx.filter = 'sepia(60%)';
+ ctx.drawImage(img, 200, 0, 100, 100);
+
+ ctx.filter = 'saturate(30%)';
+ ctx.drawImage(img, 0, 100, 100, 100);
+
+ ctx.filter = 'hue-rotate(90degree)';
+ ctx.drawImage(img, 100, 100, 100, 100);
+
+ ctx.filter = 'invert(100%)';
+ ctx.drawImage(img, 200, 100, 100, 100);
+
+ ctx.filter = 'opacity(25%)';
+ ctx.drawImage(img, 0, 200, 100, 100);
+
+ ctx.filter = 'brightness(0.4)';
+ ctx.drawImage(img, 100, 200, 100, 100);
+
+ ctx.filter = 'contrast(200%)';
+ ctx.drawImage(img, 200, 200, 100, 100);
+
+ ctx.filter = 'blur(5px)';
+ ctx.drawImage(img, 0, 300, 100, 100);
+
+ let result = ctx.toDataURL()
+ console.info(result)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+```
+
+
+
## 方法
@@ -1802,82 +1932,6 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void
-### filter
-
-filter(filter: string): void
-
-为Canvas图形设置各类滤镜效果。
-
-从API version 9开始，该接口支持在ArkTS卡片中使用。
-
-**参数:**
-
-| 参数 | 类型 | 必填 | 默认值 | 说明 |
-| ------ | ------ | ---- | ---- | ---------------------------------------- |
-| filter | string | 是 | - | 接受各类滤镜效果的函数。支持的滤镜效果如下：
- 'none': 无滤镜效果
- 'blur'：给图像设置高斯模糊
- 'brightness'：给图片应用一种线性乘法，使其看起来更亮或更暗
- 'contrast'：调整图像的对比度
- 'grayscale'：将图像转换为灰度图像
- 'hue-rotate'：给图像应用色相旋转
- 'invert'：反转输入图像
- 'opacity'：转化图像的透明程度
- 'saturate'：转换图像饱和度
- 'sepia'：将图像转换为深褐色
默认值：'none' |
-
-**示例：**
-```ts
- // xxx.ets
- @Entry
- @Component
- struct FilterDemo {
- 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(() =>{
- let ctx = this.context
- let img = this.img
-
- ctx.drawImage(img, 0, 0, 100, 100);
-
- ctx.filter = 'grayscale(50%)';
- ctx.drawImage(img, 100, 0, 100, 100);
-
- ctx.filter = 'sepia(60%)';
- ctx.drawImage(img, 200, 0, 100, 100);
-
- ctx.filter = 'saturate(30%)';
- ctx.drawImage(img, 0, 100, 100, 100);
-
- ctx.filter = 'hue-rotate(90degree)';
- ctx.drawImage(img, 100, 100, 100, 100);
-
- ctx.filter = 'invert(100%)';
- ctx.drawImage(img, 200, 100, 100, 100);
-
- ctx.filter = 'opacity(25%)';
- ctx.drawImage(img, 0, 200, 100, 100);
-
- ctx.filter = 'brightness(0.4)';
- ctx.drawImage(img, 100, 200, 100, 100);
-
- ctx.filter = 'contrast(200%)';
- ctx.drawImage(img, 200, 200, 100, 100);
-
- ctx.filter = 'blur(5px)';
- ctx.drawImage(img, 0, 300, 100, 100);
-
- let result = ctx.toDataURL()
- console.info(result)
- })
- }
- .width('100%')
- .height('100%')
- }
- }
-```
-
-
-
-
### getTransform
getTransform(): Matrix2D
@@ -1902,47 +1956,6 @@ resetTransform(): void
从API version 9开始，该接口支持在ArkTS卡片中使用。
-### direction
-
-direction(direction: CanvasDirection): void
-
-绘制文本时，描述当前文本方向的属性。
-
-从API version 9开始，该接口支持在ArkTS卡片中使用。
-
-**示例：**
-```ts
- // xxx.ets
- @Entry
- @Component
- struct DirectionDemo {
- 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 ctx = this.context
- ctx.font = '48px serif';
- ctx.textAlign = 'start'
- ctx.fillText("Hi ltr!", 200, 50);
-
- ctx.direction = "rtl";
- ctx.fillText("Hi rtl!", 200, 100);
- })
- }
- .width('100%')
- .height('100%')
- }
- }
-```
-
-
-
### rotate
rotate(angle: number): void
@@ -2536,52 +2549,6 @@ getLineDash(): number[]
-
-### imageSmoothingQuality
-
-imageSmoothingQuality(quality: imageSmoothingQuality)
-
-用于设置图像平滑度。
-
-从API version 9开始，该接口支持在ArkTS卡片中使用。
-
- **参数：**
-
-| 参数 | 类型 | 描述 |
-| ------- | --------------------- | ---------------------------------------- |
-| quality | imageSmoothingQuality | 支持如下三种类型：
- 'low'：低画质
- 'medium'：中画质
- 'high'：高画质 |
-
-**示例：**
-```ts
- // xxx.ets
- @Entry
- @Component
- struct ImageSmoothingQualityDemo {
- 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(() =>{
- let ctx = this.context
- ctx.imageSmoothingEnabled = true
- ctx.imageSmoothingQuality = 'high'
- ctx.drawImage(this.img, 0, 0, 400, 200)
- })
- }
- .width('100%')
- .height('100%')
- }
- }
-```
-
-
-
### transferFromImageBitmap
transferFromImageBitmap(bitmap: ImageBitmap): void