!7153 readme修改+资源文件调整

Merge pull request !7153 from LiAn/OpenHarmony-3.1-Release

zh-cn/application-dev/quick-start/Readme-CN.md

@@ -9,6 +9,5 @@
 - 开发基础知识
   - [应用包结构说明(FA模型)](package-structure.md)
   - [应用包结构说明(Stage模型)](stage-structure.md)
-  - [资源文件的分类](basic-resource-file-categories.md)
   - [SysCap说明](syscap.md)
 

zh-cn/application-dev/reference/arkui-js/Readme-CN.md

 # 基于JS扩展的类Web开发范式
 
-- 组件
-    - 通用
-        - [通用属性](js-components-common-attributes.md)
-        - [通用样式](js-components-common-styles.md)
-        - [通用事件](js-components-common-events.md)
-        - [通用方法](js-components-common-methods.md)
-        - [动画样式](js-components-common-animation.md)
-        - [渐变样式](js-components-common-gradient.md)
-        - [转场样式](js-components-common-transition.md)
-        - [媒体查询](js-components-common-mediaquery.md)
-        - [自定义字体样式](js-components-common-customizing-font.md)
-        - [原子布局](js-components-common-atomic-layout.md)
-    - 容器组件
-        - [badge](js-components-container-badge.md)
-        - [dialog](js-components-container-dialog.md)
-        - [div](js-components-container-div.md)
-        - [form](js-components-container-form.md)
-        - [list](js-components-container-list.md)
-        - [list-item](js-components-container-list-item.md)
-        - [list-item-group](js-components-container-list-item-group.md)
-        - [panel](js-components-container-panel.md)
-        - [popup](js-components-container-popup.md)
-        - [refresh](js-components-container-refresh.md)
-        - [stack](js-components-container-stack.md)
-        - [stepper](js-components-container-stepper.md)
-        - [stepper-item](js-components-container-stepper-item.md)
-        - [swiper](js-components-container-swiper.md)
-        - [tabs](js-components-container-tabs.md)
-        - [tab-bar](js-components-container-tab-bar.md)
-        - [tab-content](js-components-container-tab-content.md)
-    - 基础组件
-        - [button](js-components-basic-button.md)
-        - [chart](js-components-basic-chart.md)
-        - [divider](js-components-basic-divider.md)
-        - [image](js-components-basic-image.md)
-        - [image-animator](js-components-basic-image-animator.md)
-        - [input](js-components-basic-input.md)
-        - [label](js-components-basic-label.md)
-        - [marquee](js-components-basic-marquee.md)
-        - [menu](js-components-basic-menu.md)
-        - [option](js-components-basic-option.md)
-        - [picker](js-components-basic-picker.md)
-        - [picker-view](js-components-basic-picker-view.md)
-        - [piece](js-components-basic-piece.md)
-        - [progress](js-components-basic-progress.md)
-        - [qrcode](js-components-basic-qrcode.md)
-        - [rating](js-components-basic-rating.md)
-        - [richtext](js-components-basic-richtext.md)
-        - [search](js-components-basic-search.md)
-        - [select](js-components-basic-select.md)
-        - [slider](js-components-basic-slider.md)
-        - [span](js-components-basic-span.md)
-        - [switch](js-components-basic-switch.md)
-        - [text](js-components-basic-text.md)
-        - [textarea](js-components-basic-textarea.md)
-        - [toolbar](js-components-basic-toolbar.md)
-        - [toolbar-item](js-components-basic-toolbar-item.md)
-        - [toggle](js-components-basic-toggle.md)
-        - [web](js-components-basic-web.md)
-    - 媒体组件
-        - [video](js-components-media-video.md)
-    - 画布组件
-        - [canvas组件](js-components-canvas-canvas.md)
-        - [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md)
-        - [Image对象](js-components-canvas-image.md)
-        - [CanvasGradient对象](js-components-canvas-canvasgradient.md)
-        - [ImageData对象](js-components-canvas-imagedata.md)
-        - [Path2D对象](js-components-canvas-path2d.md)
-        - [ImageBitmap对象](js-components-canvas-imagebitmap.md)
-        - [OffscreenCanvas对象](js-components-canvas-offscreencanvas.md)
-        - [OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md)
-    - 栅格组件
-        - [基本概念](js-components-grid-basic-concepts.md)
-        - [grid-container](js-components-grid-container.md)
-        - [grid-row](js-components-grid-row.md)
-        - [grid-col](js-components-grid-col.md)
-    - svg组件
-        - [通用属性](js-components-svg-common-attributes.md)
-        - [svg](js-components-svg.md)
-        - [rect](js-components-svg-rect.md)
-        - [circle](js-components-svg-circle.md)
-        - [ellipse](js-components-svg-ellipse.md)
-        - [path](js-components-svg-path.md)
-        - [line](js-components-svg-line.md)
-        - [polyline](js-components-svg-polyline.md)
-        - [polygon](js-components-svg-polygon.md)
-        - [text](js-components-svg-text.md)
-        - [tspan](js-components-svg-tspan.md)
-        - [textPath](js-components-svg-textpath.md)
-        - [animate](js-components-svg-animate.md)
-        - [animateMotion](js-components-svg-animatemotion.md)
-        - [animateTransform](js-components-svg-animatetransform.md)
+- 组件通用信息
+    - [通用属性](js-components-common-attributes.md)
+    - [通用样式](js-components-common-styles.md)
+    - [通用事件](js-components-common-events.md)
+    - [通用方法](js-components-common-methods.md)
+    - [动画样式](js-components-common-animation.md)
+    - [渐变样式](js-components-common-gradient.md)
+    - [转场样式](js-components-common-transition.md)
+    - [媒体查询](js-components-common-mediaquery.md)
+    - [自定义字体样式](js-components-common-customizing-font.md)
+    - [原子布局](js-components-common-atomic-layout.md)
+- 容器组件
+    - [badge](js-components-container-badge.md)
+    - [dialog](js-components-container-dialog.md)
+    - [div](js-components-container-div.md)
+    - [form](js-components-container-form.md)
+    - [list](js-components-container-list.md)
+    - [list-item](js-components-container-list-item.md)
+    - [list-item-group](js-components-container-list-item-group.md)
+    - [panel](js-components-container-panel.md)
+    - [popup](js-components-container-popup.md)
+    - [refresh](js-components-container-refresh.md)
+    - [stack](js-components-container-stack.md)
+    - [stepper](js-components-container-stepper.md)
+    - [stepper-item](js-components-container-stepper-item.md)
+    - [swiper](js-components-container-swiper.md)
+    - [tabs](js-components-container-tabs.md)
+    - [tab-bar](js-components-container-tab-bar.md)
+    - [tab-content](js-components-container-tab-content.md)
+- 基础组件
+    - [button](js-components-basic-button.md)
+    - [chart](js-components-basic-chart.md)
+    - [divider](js-components-basic-divider.md)
+    - [image](js-components-basic-image.md)
+    - [image-animator](js-components-basic-image-animator.md)
+    - [input](js-components-basic-input.md)
+    - [label](js-components-basic-label.md)
+    - [marquee](js-components-basic-marquee.md)
+    - [menu](js-components-basic-menu.md)
+    - [option](js-components-basic-option.md)
+    - [picker](js-components-basic-picker.md)
+    - [picker-view](js-components-basic-picker-view.md)
+    - [piece](js-components-basic-piece.md)
+    - [progress](js-components-basic-progress.md)
+    - [qrcode](js-components-basic-qrcode.md)
+    - [rating](js-components-basic-rating.md)
+    - [richtext](js-components-basic-richtext.md)
+    - [search](js-components-basic-search.md)
+    - [select](js-components-basic-select.md)
+    - [slider](js-components-basic-slider.md)
+    - [span](js-components-basic-span.md)
+    - [switch](js-components-basic-switch.md)
+    - [text](js-components-basic-text.md)
+    - [textarea](js-components-basic-textarea.md)
+    - [toolbar](js-components-basic-toolbar.md)
+    - [toolbar-item](js-components-basic-toolbar-item.md)
+    - [toggle](js-components-basic-toggle.md)
+    - [web](js-components-basic-web.md)
+- 媒体组件
+    - [video](js-components-media-video.md)
+- 画布组件
+    - [canvas组件](js-components-canvas-canvas.md)
+    - [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md)
+    - [Image对象](js-components-canvas-image.md)
+    - [CanvasGradient对象](js-components-canvas-canvasgradient.md)
+    - [ImageData对象](js-components-canvas-imagedata.md)
+    - [Path2D对象](js-components-canvas-path2d.md)
+    - [ImageBitmap对象](js-components-canvas-imagebitmap.md)
+    - [OffscreenCanvas对象](js-components-canvas-offscreencanvas.md)
+    - [OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md)
+- 栅格组件
+    - [基本概念](js-components-grid-basic-concepts.md)
+    - [grid-container](js-components-grid-container.md)
+    - [grid-row](js-components-grid-row.md)
+    - [grid-col](js-components-grid-col.md)
+- svg组件
+    - [通用属性](js-components-svg-common-attributes.md)
+    - [svg](js-components-svg.md)
+    - [rect](js-components-svg-rect.md)
+    - [circle](js-components-svg-circle.md)
+    - [ellipse](js-components-svg-ellipse.md)
+    - [path](js-components-svg-path.md)
+    - [line](js-components-svg-line.md)
+    - [polyline](js-components-svg-polyline.md)
+    - [polygon](js-components-svg-polygon.md)
+    - [text](js-components-svg-text.md)
+    - [tspan](js-components-svg-tspan.md)
+    - [textPath](js-components-svg-textpath.md)
+    - [animate](js-components-svg-animate.md)
+    - [animateMotion](js-components-svg-animatemotion.md)
+    - [animateTransform](js-components-svg-animatetransform.md)
+
+
 - 自定义组件
     - [基本用法](js-components-custom-basic-usage.md)
     - [自定义事件](js-components-custom-events.md)
@@ -99,5 +100,4 @@
     - [事件参数](js-components-custom-event-parameter.md)
     - [slot插槽](js-components-custom-slot.md)
     - [生命周期定义](js-components-custom-lifecycle.md)
-- 附录
-    - [类型说明](js-appendix-types.md)
+- [数据类型说明](js-appendix-types.md)

zh-cn/application-dev/reference/arkui-js/js-appendix-types.md

-# 类型说明
+# 数据类型说明
 
 ## 长度类型
 
-| 名称 | 类型定义 | 描述 |
-| -------- | -------- | -------- |
-| length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位，输入为number类型时，使用px单位；输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：<br/>-&nbsp;px：逻辑尺寸单位。<br/>-&nbsp;fp<sup>6+</sup>：字体尺寸单位，会随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。 |
-| percentage | string | 百分比尺寸单位，如“50%”。 |
+| 名称         | 类型定义                       | 描述                                       |
+| ---------- | -------------------------- | ---------------------------------------- |
+| length     | string&nbsp;\|&nbsp;number | 用于描述尺寸单位，输入为number类型时，使用px单位；输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：<br/>-&nbsp;px：逻辑尺寸单位。<br/>-&nbsp;fp<sup>6+</sup>：字体尺寸单位，会随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。 |
+| percentage | string                     | 百分比尺寸单位，如“50%”。                          |
 
 
 ## 颜色类型
 
-| 名称 | 类型定义 | 描述 |
-| -------- | -------- | -------- |
+| 名称    | 类型定义                  | 描述                                       |
+| ----- | --------------------- | ---------------------------------------- |
 | color | string&nbsp;\|颜色枚举字符串 | 用于描述颜色信息。<br/>字符串格式如下：<br/>-&nbsp;'rgb(255,&nbsp;255,&nbsp;255)'<br/>-&nbsp;'rgba(255,&nbsp;255,&nbsp;255,&nbsp;1.0)'<br/>-&nbsp;HEX格式：'\#rrggbb'，'\#aarrggbb'<br/>-&nbsp;枚举格式：'black'，'white'。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;JS脚本中不支持颜色枚举格式。 |
 
 **表1** 当前支持的颜色枚举
 
-| 枚举名称 | 对应颜色 | 颜色 |
-| -------- | -------- | -------- |
-| aliceblue | \#f0f8ff | ![zh-cn_image_0000001173324803](figures/zh-cn_image_0000001173324803.png) |
-| antiquewhite | \#faebd7 | ![zh-cn_image_0000001127285014](figures/zh-cn_image_0000001127285014.png) |
-| aqua | \#00ffff | ![zh-cn_image_0000001127285050](figures/zh-cn_image_0000001127285050.png) |
-| aquamarine | \#7fffd4 | ![zh-cn_image_0000001173324729](figures/zh-cn_image_0000001173324729.png) |
-| azure | \#f0ffff | ![zh-cn_image_0000001127285040](figures/zh-cn_image_0000001127285040.png) |
-| beige | \#f5f5dc | ![zh-cn_image_0000001173324773](figures/zh-cn_image_0000001173324773.png) |
-| bisque | \#ffe4c4 | ![zh-cn_image_0000001173164895](figures/zh-cn_image_0000001173164895.png) |
-| black | \#000000 | ![zh-cn_image_0000001173324735](figures/zh-cn_image_0000001173324735.png) |
-| blanchedalmond | \#ffebcd | ![zh-cn_image_0000001173164889](figures/zh-cn_image_0000001173164889.png) |
-| blue | \#0000ff | ![zh-cn_image_0000001127125194](figures/zh-cn_image_0000001127125194.png) |
-| blueviolet | \#8a2be2 | ![zh-cn_image_0000001127285046](figures/zh-cn_image_0000001127285046.png) |
-| brown | \#a52a2a | ![zh-cn_image_0000001173324833](figures/zh-cn_image_0000001173324833.png) |
-| burlywood | \#deB887 | ![zh-cn_image_0000001127285026](figures/zh-cn_image_0000001127285026.png) |
-| cadetblue | \#5f9ea0 | ![zh-cn_image_0000001127125210](figures/zh-cn_image_0000001127125210.png) |
-| chartreuse | \#7fff00 | ![zh-cn_image_0000001173324811](figures/zh-cn_image_0000001173324811.png) |
-| chocolate | \#d2691e | ![zh-cn_image_0000001127125256](figures/zh-cn_image_0000001127125256.png) |
-| coral | \#ff7f50 | ![zh-cn_image_0000001173164877](figures/zh-cn_image_0000001173164877.png) |
-| cornflowerblue | \#6495ed | ![zh-cn_image_0000001173324781](figures/zh-cn_image_0000001173324781.png) |
-| cornsilk | \#fff8dc | ![zh-cn_image_0000001127285048](figures/zh-cn_image_0000001127285048.png) |
-| crimson | \#dc143c | ![zh-cn_image_0000001127285066](figures/zh-cn_image_0000001127285066.png) |
-| cyan | \#00ffff | ![zh-cn_image_0000001173324789](figures/zh-cn_image_0000001173324789.png) |
-| darkblue | \#00008b | ![zh-cn_image_0000001173164841](figures/zh-cn_image_0000001173164841.png) |
-| darkcyan | \#008b8b | ![zh-cn_image_0000001173324745](figures/zh-cn_image_0000001173324745.png) |
-| darkgoldenrod | \#b8860b | ![zh-cn_image_0000001173324835](figures/zh-cn_image_0000001173324835.png) |
-| darkgray | \#a9a9a9 | ![zh-cn_image_0000001127285028](figures/zh-cn_image_0000001127285028.png) |
-| darkgreen | \#006400 | ![zh-cn_image_0000001127284990](figures/zh-cn_image_0000001127284990.png) |
-| darkgrey | \#a9a9a9 | ![zh-cn_image_0000001127125174](figures/zh-cn_image_0000001127125174.png) |
-| darkkhaki | \#bdb76b | ![zh-cn_image_0000001127285070](figures/zh-cn_image_0000001127285070.png) |
-| darkmagenta | \#8b008b | ![zh-cn_image_0000001173164875](figures/zh-cn_image_0000001173164875.png) |
-| darkolivegreen | \#556b2f | ![zh-cn_image_0000001173164835](figures/zh-cn_image_0000001173164835.png) |
-| darkorange | \#ff8c00 | ![zh-cn_image_0000001127125178](figures/zh-cn_image_0000001127125178.png) |
-| darkorchid | \#9932cc | ![zh-cn_image_0000001173324829](figures/zh-cn_image_0000001173324829.png) |
-| darkred | \#8b0000 | ![zh-cn_image_0000001173164851](figures/zh-cn_image_0000001173164851.png) |
-| darksalmon | \#e9967a | ![zh-cn_image_0000001127284998](figures/zh-cn_image_0000001127284998.png) |
-| darkseagreen | \#8fbc8f | ![zh-cn_image_0000001173324755](figures/zh-cn_image_0000001173324755.png) |
-| darkslateblue | \#483d8b | ![zh-cn_image_0000001127125246](figures/zh-cn_image_0000001127125246.png) |
-| darkslategray | \#2f4f4f | ![zh-cn_image_0000001127125190](figures/zh-cn_image_0000001127125190.png) |
-| darkslategrey | \#2f4f4f | ![zh-cn_image_0000001173324759](figures/zh-cn_image_0000001173324759.png) |
-| darkturquoise | \#00ced1 | ![zh-cn_image_0000001127284980](figures/zh-cn_image_0000001127284980.png) |
-| darkviolet | \#9400d3 | ![zh-cn_image_0000001127285058](figures/zh-cn_image_0000001127285058.png) |
-| deeppink | \#ff1493 | ![zh-cn_image_0000001173324767](figures/zh-cn_image_0000001173324767.png) |
-| deepskyblue | \#00bfff | ![zh-cn_image_0000001173164897](figures/zh-cn_image_0000001173164897.png) |
-| dimgray | \#696969 | ![zh-cn_image_0000001127285022](figures/zh-cn_image_0000001127285022.png) |
-| dimgrey | \#696969 | ![zh-cn_image_0000001173164911](figures/zh-cn_image_0000001173164911.png) |
-| dodgerblue | \#1e90ff | ![zh-cn_image_0000001173164855](figures/zh-cn_image_0000001173164855.png) |
-| firebrick | \#b22222 | ![zh-cn_image_0000001127125234](figures/zh-cn_image_0000001127125234.png) |
-| floralwhite | \#fffaf0 | ![zh-cn_image_0000001173324771](figures/zh-cn_image_0000001173324771.png) |
-| forestgreen | \#228b22 | ![zh-cn_image_0000001173324825](figures/zh-cn_image_0000001173324825.png) |
-| fuchsia | \#ff00ff | ![zh-cn_image_0000001127285052](figures/zh-cn_image_0000001127285052.png) |
-| gainsboro | \#dcdcdc | ![zh-cn_image_0000001173164901](figures/zh-cn_image_0000001173164901.png) |
-| ghostwhite | \#f8f8ff | ![zh-cn_image_0000001127285012](figures/zh-cn_image_0000001127285012.png) |
-| gold | \#ffd700 | ![zh-cn_image_0000001173324761](figures/zh-cn_image_0000001173324761.png) |
-| goldenrod | \#daa520 | ![zh-cn_image_0000001173324817](figures/zh-cn_image_0000001173324817.png) |
-| gray | \#808080 | ![zh-cn_image_0000001127125238](figures/zh-cn_image_0000001127125238.png) |
-| green | \#008000 | ![zh-cn_image_0000001173164865](figures/zh-cn_image_0000001173164865.png) |
-| greenyellow | \#adff2f | ![zh-cn_image_0000001127285000](figures/zh-cn_image_0000001127285000.png) |
-| grey | \#808080 | ![zh-cn_image_0000001127285054](figures/zh-cn_image_0000001127285054.png) |
-| honeydew | \#f0fff0 | ![zh-cn_image_0000001173324813](figures/zh-cn_image_0000001173324813.png) |
-| hotpink | \#ff69b4 | ![zh-cn_image_0000001127285016](figures/zh-cn_image_0000001127285016.png) |
-| indianred | \#cd5c5c | ![zh-cn_image_0000001173164849](figures/zh-cn_image_0000001173164849.png) |
-| indigo | \#4b0082 | ![zh-cn_image_0000001173324821](figures/zh-cn_image_0000001173324821.png) |
-| ivory | \#fffff0 | ![zh-cn_image_0000001173164887](figures/zh-cn_image_0000001173164887.png) |
-| khaki | \#f0e68c | ![zh-cn_image_0000001173324801](figures/zh-cn_image_0000001173324801.png) |
-| lavender | \#e6e6fa | ![zh-cn_image_0000001127125188](figures/zh-cn_image_0000001127125188.png) |
-| lavenderblush | \#fff0f5 | ![zh-cn_image_0000001173324809](figures/zh-cn_image_0000001173324809.png) |
-| lawngreen | \#7cfc00 | ![zh-cn_image_0000001127125224](figures/zh-cn_image_0000001127125224.png) |
-| lemonchiffon | \#fffacd | ![zh-cn_image_0000001173164879](figures/zh-cn_image_0000001173164879.png) |
-| lightblue | \#add8e6 | ![zh-cn_image_0000001127125180](figures/zh-cn_image_0000001127125180.png) |
-| lightcoral | \#f08080 | ![zh-cn_image_0000001127125228](figures/zh-cn_image_0000001127125228.png) |
-| lightcyan | \#e0ffff | ![zh-cn_image_0000001173324799](figures/zh-cn_image_0000001173324799.png) |
+| 枚举名称                 | 对应颜色     | 颜色                                       |
+| -------------------- | -------- | ---------------------------------------- |
+| aliceblue            | \#f0f8ff | ![zh-cn_image_0000001173324803](figures/zh-cn_image_0000001173324803.png) |
+| antiquewhite         | \#faebd7 | ![zh-cn_image_0000001127285014](figures/zh-cn_image_0000001127285014.png) |
+| aqua                 | \#00ffff | ![zh-cn_image_0000001127285050](figures/zh-cn_image_0000001127285050.png) |
+| aquamarine           | \#7fffd4 | ![zh-cn_image_0000001173324729](figures/zh-cn_image_0000001173324729.png) |
+| azure                | \#f0ffff | ![zh-cn_image_0000001127285040](figures/zh-cn_image_0000001127285040.png) |
+| beige                | \#f5f5dc | ![zh-cn_image_0000001173324773](figures/zh-cn_image_0000001173324773.png) |
+| bisque               | \#ffe4c4 | ![zh-cn_image_0000001173164895](figures/zh-cn_image_0000001173164895.png) |
+| black                | \#000000 | ![zh-cn_image_0000001173324735](figures/zh-cn_image_0000001173324735.png) |
+| blanchedalmond       | \#ffebcd | ![zh-cn_image_0000001173164889](figures/zh-cn_image_0000001173164889.png) |
+| blue                 | \#0000ff | ![zh-cn_image_0000001127125194](figures/zh-cn_image_0000001127125194.png) |
+| blueviolet           | \#8a2be2 | ![zh-cn_image_0000001127285046](figures/zh-cn_image_0000001127285046.png) |
+| brown                | \#a52a2a | ![zh-cn_image_0000001173324833](figures/zh-cn_image_0000001173324833.png) |
+| burlywood            | \#deB887 | ![zh-cn_image_0000001127285026](figures/zh-cn_image_0000001127285026.png) |
+| cadetblue            | \#5f9ea0 | ![zh-cn_image_0000001127125210](figures/zh-cn_image_0000001127125210.png) |
+| chartreuse           | \#7fff00 | ![zh-cn_image_0000001173324811](figures/zh-cn_image_0000001173324811.png) |
+| chocolate            | \#d2691e | ![zh-cn_image_0000001127125256](figures/zh-cn_image_0000001127125256.png) |
+| coral                | \#ff7f50 | ![zh-cn_image_0000001173164877](figures/zh-cn_image_0000001173164877.png) |
+| cornflowerblue       | \#6495ed | ![zh-cn_image_0000001173324781](figures/zh-cn_image_0000001173324781.png) |
+| cornsilk             | \#fff8dc | ![zh-cn_image_0000001127285048](figures/zh-cn_image_0000001127285048.png) |
+| crimson              | \#dc143c | ![zh-cn_image_0000001127285066](figures/zh-cn_image_0000001127285066.png) |
+| cyan                 | \#00ffff | ![zh-cn_image_0000001173324789](figures/zh-cn_image_0000001173324789.png) |
+| darkblue             | \#00008b | ![zh-cn_image_0000001173164841](figures/zh-cn_image_0000001173164841.png) |
+| darkcyan             | \#008b8b | ![zh-cn_image_0000001173324745](figures/zh-cn_image_0000001173324745.png) |
+| darkgoldenrod        | \#b8860b | ![zh-cn_image_0000001173324835](figures/zh-cn_image_0000001173324835.png) |
+| darkgray             | \#a9a9a9 | ![zh-cn_image_0000001127285028](figures/zh-cn_image_0000001127285028.png) |
+| darkgreen            | \#006400 | ![zh-cn_image_0000001127284990](figures/zh-cn_image_0000001127284990.png) |
+| darkgrey             | \#a9a9a9 | ![zh-cn_image_0000001127125174](figures/zh-cn_image_0000001127125174.png) |
+| darkkhaki            | \#bdb76b | ![zh-cn_image_0000001127285070](figures/zh-cn_image_0000001127285070.png) |
+| darkmagenta          | \#8b008b | ![zh-cn_image_0000001173164875](figures/zh-cn_image_0000001173164875.png) |
+| darkolivegreen       | \#556b2f | ![zh-cn_image_0000001173164835](figures/zh-cn_image_0000001173164835.png) |
+| darkorange           | \#ff8c00 | ![zh-cn_image_0000001127125178](figures/zh-cn_image_0000001127125178.png) |
+| darkorchid           | \#9932cc | ![zh-cn_image_0000001173324829](figures/zh-cn_image_0000001173324829.png) |
+| darkred              | \#8b0000 | ![zh-cn_image_0000001173164851](figures/zh-cn_image_0000001173164851.png) |
+| darksalmon           | \#e9967a | ![zh-cn_image_0000001127284998](figures/zh-cn_image_0000001127284998.png) |
+| darkseagreen         | \#8fbc8f | ![zh-cn_image_0000001173324755](figures/zh-cn_image_0000001173324755.png) |
+| darkslateblue        | \#483d8b | ![zh-cn_image_0000001127125246](figures/zh-cn_image_0000001127125246.png) |
+| darkslategray        | \#2f4f4f | ![zh-cn_image_0000001127125190](figures/zh-cn_image_0000001127125190.png) |
+| darkslategrey        | \#2f4f4f | ![zh-cn_image_0000001173324759](figures/zh-cn_image_0000001173324759.png) |
+| darkturquoise        | \#00ced1 | ![zh-cn_image_0000001127284980](figures/zh-cn_image_0000001127284980.png) |
+| darkviolet           | \#9400d3 | ![zh-cn_image_0000001127285058](figures/zh-cn_image_0000001127285058.png) |
+| deeppink             | \#ff1493 | ![zh-cn_image_0000001173324767](figures/zh-cn_image_0000001173324767.png) |
+| deepskyblue          | \#00bfff | ![zh-cn_image_0000001173164897](figures/zh-cn_image_0000001173164897.png) |
+| dimgray              | \#696969 | ![zh-cn_image_0000001127285022](figures/zh-cn_image_0000001127285022.png) |
+| dimgrey              | \#696969 | ![zh-cn_image_0000001173164911](figures/zh-cn_image_0000001173164911.png) |
+| dodgerblue           | \#1e90ff | ![zh-cn_image_0000001173164855](figures/zh-cn_image_0000001173164855.png) |
+| firebrick            | \#b22222 | ![zh-cn_image_0000001127125234](figures/zh-cn_image_0000001127125234.png) |
+| floralwhite          | \#fffaf0 | ![zh-cn_image_0000001173324771](figures/zh-cn_image_0000001173324771.png) |
+| forestgreen          | \#228b22 | ![zh-cn_image_0000001173324825](figures/zh-cn_image_0000001173324825.png) |
+| fuchsia              | \#ff00ff | ![zh-cn_image_0000001127285052](figures/zh-cn_image_0000001127285052.png) |
+| gainsboro            | \#dcdcdc | ![zh-cn_image_0000001173164901](figures/zh-cn_image_0000001173164901.png) |
+| ghostwhite           | \#f8f8ff | ![zh-cn_image_0000001127285012](figures/zh-cn_image_0000001127285012.png) |
+| gold                 | \#ffd700 | ![zh-cn_image_0000001173324761](figures/zh-cn_image_0000001173324761.png) |
+| goldenrod            | \#daa520 | ![zh-cn_image_0000001173324817](figures/zh-cn_image_0000001173324817.png) |
+| gray                 | \#808080 | ![zh-cn_image_0000001127125238](figures/zh-cn_image_0000001127125238.png) |
+| green                | \#008000 | ![zh-cn_image_0000001173164865](figures/zh-cn_image_0000001173164865.png) |
+| greenyellow          | \#adff2f | ![zh-cn_image_0000001127285000](figures/zh-cn_image_0000001127285000.png) |
+| grey                 | \#808080 | ![zh-cn_image_0000001127285054](figures/zh-cn_image_0000001127285054.png) |
+| honeydew             | \#f0fff0 | ![zh-cn_image_0000001173324813](figures/zh-cn_image_0000001173324813.png) |
+| hotpink              | \#ff69b4 | ![zh-cn_image_0000001127285016](figures/zh-cn_image_0000001127285016.png) |
+| indianred            | \#cd5c5c | ![zh-cn_image_0000001173164849](figures/zh-cn_image_0000001173164849.png) |
+| indigo               | \#4b0082 | ![zh-cn_image_0000001173324821](figures/zh-cn_image_0000001173324821.png) |
+| ivory                | \#fffff0 | ![zh-cn_image_0000001173164887](figures/zh-cn_image_0000001173164887.png) |
+| khaki                | \#f0e68c | ![zh-cn_image_0000001173324801](figures/zh-cn_image_0000001173324801.png) |
+| lavender             | \#e6e6fa | ![zh-cn_image_0000001127125188](figures/zh-cn_image_0000001127125188.png) |
+| lavenderblush        | \#fff0f5 | ![zh-cn_image_0000001173324809](figures/zh-cn_image_0000001173324809.png) |
+| lawngreen            | \#7cfc00 | ![zh-cn_image_0000001127125224](figures/zh-cn_image_0000001127125224.png) |
+| lemonchiffon         | \#fffacd | ![zh-cn_image_0000001173164879](figures/zh-cn_image_0000001173164879.png) |
+| lightblue            | \#add8e6 | ![zh-cn_image_0000001127125180](figures/zh-cn_image_0000001127125180.png) |
+| lightcoral           | \#f08080 | ![zh-cn_image_0000001127125228](figures/zh-cn_image_0000001127125228.png) |
+| lightcyan            | \#e0ffff | ![zh-cn_image_0000001173324799](figures/zh-cn_image_0000001173324799.png) |
 | lightgoldenrodyellow | \#fafad2 | ![zh-cn_image_0000001127125218](figures/zh-cn_image_0000001127125218.png) |
-| lightgray | \#d3d3d3 | ![zh-cn_image_0000001127284974](figures/zh-cn_image_0000001127284974.png) |
-| lightgreen | \#90ee90 | ![zh-cn_image_0000001173324805](figures/zh-cn_image_0000001173324805.png) |
-| lightpink | \#ffb6c1 | ![zh-cn_image_0000001127285038](figures/zh-cn_image_0000001127285038.png) |
-| lightsalmon | \#ffa07a | ![zh-cn_image_0000001173324795](figures/zh-cn_image_0000001173324795.png) |
-| lightseagreen | \#20b2aa | ![zh-cn_image_0000001173324737](figures/zh-cn_image_0000001173324737.png) |
-| lightskyblue | \#87cefa | ![zh-cn_image_0000001127285042](figures/zh-cn_image_0000001127285042.png) |
-| lightslategray | \#778899 | ![zh-cn_image_0000001127125226](figures/zh-cn_image_0000001127125226.png) |
-| lightslategrey | \#778899 | ![zh-cn_image_0000001127125222](figures/zh-cn_image_0000001127125222.png) |
-| lightsteelblue | \#b0c4de | ![zh-cn_image_0000001127284976](figures/zh-cn_image_0000001127284976.png) |
-| lightyellow | \#ffffe0 | ![zh-cn_image_0000001173324807](figures/zh-cn_image_0000001173324807.png) |
-| lime | \#00ff00 | ![zh-cn_image_0000001127285020](figures/zh-cn_image_0000001127285020.png) |
-| limegreen | \#32cd32 | ![zh-cn_image_0000001127125236](figures/zh-cn_image_0000001127125236.png) |
-| linen | \#faf0e6 | ![zh-cn_image_0000001173324739](figures/zh-cn_image_0000001173324739.png) |
-| magenta | \#ff00ff | ![zh-cn_image_0000001127285044](figures/zh-cn_image_0000001127285044.png) |
-| maroon | \#800000 | ![zh-cn_image_0000001127285018](figures/zh-cn_image_0000001127285018.png) |
-| mediumaquamarine | \#66cdaa | ![zh-cn_image_0000001173164899](figures/zh-cn_image_0000001173164899.png) |
-| mediumblue | \#0000cd | ![zh-cn_image_0000001127284968](figures/zh-cn_image_0000001127284968.png) |
-| mediumorchid | \#ba55d3 | ![zh-cn_image_0000001127125216](figures/zh-cn_image_0000001127125216.png) |
-| mediumpurple | \#9370db | ![zh-cn_image_0000001173324779](figures/zh-cn_image_0000001173324779.png) |
-| mediumseagreen | \#3cb371 | ![zh-cn_image_0000001127125230](figures/zh-cn_image_0000001127125230.png) |
-| mediumslateblue | \#7b68ee | ![zh-cn_image_0000001173164921](figures/zh-cn_image_0000001173164921.png) |
-| mediumspringgreen | \#00fa9a | ![zh-cn_image_0000001173324793](figures/zh-cn_image_0000001173324793.png) |
-| mediumturquoise | \#48d1cc | ![zh-cn_image_0000001127125214](figures/zh-cn_image_0000001127125214.png) |
-| mediumvioletred | \#c71585 | ![zh-cn_image_0000001173164893](figures/zh-cn_image_0000001173164893.png) |
-| midnightblue | \#191970 | ![zh-cn_image_0000001127125260](figures/zh-cn_image_0000001127125260.png) |
-| mintcream | \#f5fffa | ![zh-cn_image_0000001127285030](figures/zh-cn_image_0000001127285030.png) |
-| mistyrose | \#ffe4e1 | ![zh-cn_image_0000001173324785](figures/zh-cn_image_0000001173324785.png) |
-| moccasin | \#ffe4b5 | ![zh-cn_image_0000001127125232](figures/zh-cn_image_0000001127125232.png) |
-| navajowhite | \#ffdead | ![zh-cn_image_0000001173164925](figures/zh-cn_image_0000001173164925.png) |
-| navy | \#000080 | ![zh-cn_image_0000001127285032](figures/zh-cn_image_0000001127285032.png) |
-| oldlace | \#fdf5e6 | ![zh-cn_image_0000001127125184](figures/zh-cn_image_0000001127125184.png) |
-| olive | \#808000 | ![zh-cn_image_0000001127125244](figures/zh-cn_image_0000001127125244.png) |
-| olivedrab | \#6b8e23 | ![zh-cn_image_0000001173324839](figures/zh-cn_image_0000001173324839.png) |
-| orange | \#ffa500 | ![zh-cn_image_0000001173164885](figures/zh-cn_image_0000001173164885.png) |
-| orangered | \#ff4500 | ![zh-cn_image_0000001127284996](figures/zh-cn_image_0000001127284996.png) |
-| orchid | \#da70d6 | ![zh-cn_image_0000001127285056](figures/zh-cn_image_0000001127285056.png) |
-| palegoldenrod | \#eee8aa | ![zh-cn_image_0000001127125262](figures/zh-cn_image_0000001127125262.png) |
-| palegreen | \#98fb98 | ![zh-cn_image_0000001127285006](figures/zh-cn_image_0000001127285006.png) |
-| paleturquoise | \#afeeee | ![zh-cn_image_0000001173324757](figures/zh-cn_image_0000001173324757.png) |
-| palevioletred | \#db7093 | ![zh-cn_image_0000001173164905](figures/zh-cn_image_0000001173164905.png) |
-| papayawhip | \#ffefd5 | ![zh-cn_image_0000001127125248](figures/zh-cn_image_0000001127125248.png) |
-| peachpuff | \#ffdab9 | ![zh-cn_image_0000001173324769](figures/zh-cn_image_0000001173324769.png) |
-| peru | \#cd853f | ![zh-cn_image_0000001173164843](figures/zh-cn_image_0000001173164843.png) |
-| pink | \#ffc0cb | ![zh-cn_image_0000001127125242](figures/zh-cn_image_0000001127125242.png) |
-| plum | \#dda0dd | ![zh-cn_image_0000001173324831](figures/zh-cn_image_0000001173324831.png) |
-| powderblue | \#b0e0e6 | ![zh-cn_image_0000001127285010](figures/zh-cn_image_0000001127285010.png) |
-| purple | \#800080 | ![zh-cn_image_0000001127285002](figures/zh-cn_image_0000001127285002.png) |
-| rebeccapurple | \#663399 | ![zh-cn_image_0000001173164907](figures/zh-cn_image_0000001173164907.png) |
-| red | \#ff0000 | ![zh-cn_image_0000001127125254](figures/zh-cn_image_0000001127125254.png) |
-| rosybrown | \#bc8f8f | ![zh-cn_image_0000001173324775](figures/zh-cn_image_0000001173324775.png) |
-| royalblue | \#4169e1 | ![zh-cn_image_0000001127284972](figures/zh-cn_image_0000001127284972.png) |
-| saddlebrown | \#8b4513 | ![zh-cn_image_0000001127125250](figures/zh-cn_image_0000001127125250.png) |
-| salmon | \#fa8072 | ![zh-cn_image_0000001127285064](figures/zh-cn_image_0000001127285064.png) |
-| sandybrown | \#f4a460 | ![zh-cn_image_0000001173324777](figures/zh-cn_image_0000001173324777.png) |
-| seagreen | \#2e8b57 | ![zh-cn_image_0000001173324733](figures/zh-cn_image_0000001173324733.png) |
-| seashell | \#fff5ee | ![zh-cn_image_0000001127285062](figures/zh-cn_image_0000001127285062.png) |
-| sienna | \#a0522d | ![zh-cn_image_0000001173164917](figures/zh-cn_image_0000001173164917.png) |
-| silver | \#c0c0c0 | ![zh-cn_image_0000001173324743](figures/zh-cn_image_0000001173324743.png) |
-| skyblue | \#87ceeb | ![zh-cn_image_0000001127284970](figures/zh-cn_image_0000001127284970.png) |
-| slateblue | \#6a5acd | ![zh-cn_image_0000001173164915](figures/zh-cn_image_0000001173164915.png) |
-| slategray | \#708090 | ![zh-cn_image_0000001173324815](figures/zh-cn_image_0000001173324815.png) |
-| slategrey | \#708090 | ![zh-cn_image_0000001127284982](figures/zh-cn_image_0000001127284982.png) |
-| snow | \#fffafa | ![zh-cn_image_0000001173324731](figures/zh-cn_image_0000001173324731.png) |
-| springgreen | \#00ff7f | ![zh-cn_image_0000001127285060](figures/zh-cn_image_0000001127285060.png) |
-| steelblue | \#4682b4 | ![zh-cn_image_0000001127125240](figures/zh-cn_image_0000001127125240.png) |
-| tan | \#d2b48c | ![zh-cn_image_0000001173324747](figures/zh-cn_image_0000001173324747.png) |
-| teal | \#008080 | ![zh-cn_image_0000001173324741](figures/zh-cn_image_0000001173324741.png) |
-| thistle | \#d8Bfd8 | ![zh-cn_image_0000001173164913](figures/zh-cn_image_0000001173164913.png) |
-| tomato | \#ff6347 | ![zh-cn_image_0000001173164909](figures/zh-cn_image_0000001173164909.png) |
-| turquoise | \#40e0d0 | ![zh-cn_image_0000001173164837](figures/zh-cn_image_0000001173164837.png) |
-| violet | \#ee82ee | ![zh-cn_image_0000001127125258](figures/zh-cn_image_0000001127125258.png) |
-| wheat | \#f5deb3 | ![zh-cn_image_0000001127285068](figures/zh-cn_image_0000001127285068.png) |
-| white | \#ffffff | ![zh-cn_image_0000001173324823](figures/zh-cn_image_0000001173324823.png) |
-| whitesmoke | \#f5f5f5 | ![zh-cn_image_0000001127284992](figures/zh-cn_image_0000001127284992.png) |
-| yellow | \#ffff00 | ![zh-cn_image_0000001173324837](figures/zh-cn_image_0000001173324837.png) |
-| yellowgreen | \#9acd32 | ![zh-cn_image_0000001173164923](figures/zh-cn_image_0000001173164923.png) |
+| lightgray            | \#d3d3d3 | ![zh-cn_image_0000001127284974](figures/zh-cn_image_0000001127284974.png) |
+| lightgreen           | \#90ee90 | ![zh-cn_image_0000001173324805](figures/zh-cn_image_0000001173324805.png) |
+| lightpink            | \#ffb6c1 | ![zh-cn_image_0000001127285038](figures/zh-cn_image_0000001127285038.png) |
+| lightsalmon          | \#ffa07a | ![zh-cn_image_0000001173324795](figures/zh-cn_image_0000001173324795.png) |
+| lightseagreen        | \#20b2aa | ![zh-cn_image_0000001173324737](figures/zh-cn_image_0000001173324737.png) |
+| lightskyblue         | \#87cefa | ![zh-cn_image_0000001127285042](figures/zh-cn_image_0000001127285042.png) |
+| lightslategray       | \#778899 | ![zh-cn_image_0000001127125226](figures/zh-cn_image_0000001127125226.png) |
+| lightslategrey       | \#778899 | ![zh-cn_image_0000001127125222](figures/zh-cn_image_0000001127125222.png) |
+| lightsteelblue       | \#b0c4de | ![zh-cn_image_0000001127284976](figures/zh-cn_image_0000001127284976.png) |
+| lightyellow          | \#ffffe0 | ![zh-cn_image_0000001173324807](figures/zh-cn_image_0000001173324807.png) |
+| lime                 | \#00ff00 | ![zh-cn_image_0000001127285020](figures/zh-cn_image_0000001127285020.png) |
+| limegreen            | \#32cd32 | ![zh-cn_image_0000001127125236](figures/zh-cn_image_0000001127125236.png) |
+| linen                | \#faf0e6 | ![zh-cn_image_0000001173324739](figures/zh-cn_image_0000001173324739.png) |
+| magenta              | \#ff00ff | ![zh-cn_image_0000001127285044](figures/zh-cn_image_0000001127285044.png) |
+| maroon               | \#800000 | ![zh-cn_image_0000001127285018](figures/zh-cn_image_0000001127285018.png) |
+| mediumaquamarine     | \#66cdaa | ![zh-cn_image_0000001173164899](figures/zh-cn_image_0000001173164899.png) |
+| mediumblue           | \#0000cd | ![zh-cn_image_0000001127284968](figures/zh-cn_image_0000001127284968.png) |
+| mediumorchid         | \#ba55d3 | ![zh-cn_image_0000001127125216](figures/zh-cn_image_0000001127125216.png) |
+| mediumpurple         | \#9370db | ![zh-cn_image_0000001173324779](figures/zh-cn_image_0000001173324779.png) |
+| mediumseagreen       | \#3cb371 | ![zh-cn_image_0000001127125230](figures/zh-cn_image_0000001127125230.png) |
+| mediumslateblue      | \#7b68ee | ![zh-cn_image_0000001173164921](figures/zh-cn_image_0000001173164921.png) |
+| mediumspringgreen    | \#00fa9a | ![zh-cn_image_0000001173324793](figures/zh-cn_image_0000001173324793.png) |
+| mediumturquoise      | \#48d1cc | ![zh-cn_image_0000001127125214](figures/zh-cn_image_0000001127125214.png) |
+| mediumvioletred      | \#c71585 | ![zh-cn_image_0000001173164893](figures/zh-cn_image_0000001173164893.png) |
+| midnightblue         | \#191970 | ![zh-cn_image_0000001127125260](figures/zh-cn_image_0000001127125260.png) |
+| mintcream            | \#f5fffa | ![zh-cn_image_0000001127285030](figures/zh-cn_image_0000001127285030.png) |
+| mistyrose            | \#ffe4e1 | ![zh-cn_image_0000001173324785](figures/zh-cn_image_0000001173324785.png) |
+| moccasin             | \#ffe4b5 | ![zh-cn_image_0000001127125232](figures/zh-cn_image_0000001127125232.png) |
+| navajowhite          | \#ffdead | ![zh-cn_image_0000001173164925](figures/zh-cn_image_0000001173164925.png) |
+| navy                 | \#000080 | ![zh-cn_image_0000001127285032](figures/zh-cn_image_0000001127285032.png) |
+| oldlace              | \#fdf5e6 | ![zh-cn_image_0000001127125184](figures/zh-cn_image_0000001127125184.png) |
+| olive                | \#808000 | ![zh-cn_image_0000001127125244](figures/zh-cn_image_0000001127125244.png) |
+| olivedrab            | \#6b8e23 | ![zh-cn_image_0000001173324839](figures/zh-cn_image_0000001173324839.png) |
+| orange               | \#ffa500 | ![zh-cn_image_0000001173164885](figures/zh-cn_image_0000001173164885.png) |
+| orangered            | \#ff4500 | ![zh-cn_image_0000001127284996](figures/zh-cn_image_0000001127284996.png) |
+| orchid               | \#da70d6 | ![zh-cn_image_0000001127285056](figures/zh-cn_image_0000001127285056.png) |
+| palegoldenrod        | \#eee8aa | ![zh-cn_image_0000001127125262](figures/zh-cn_image_0000001127125262.png) |
+| palegreen            | \#98fb98 | ![zh-cn_image_0000001127285006](figures/zh-cn_image_0000001127285006.png) |
+| paleturquoise        | \#afeeee | ![zh-cn_image_0000001173324757](figures/zh-cn_image_0000001173324757.png) |
+| palevioletred        | \#db7093 | ![zh-cn_image_0000001173164905](figures/zh-cn_image_0000001173164905.png) |
+| papayawhip           | \#ffefd5 | ![zh-cn_image_0000001127125248](figures/zh-cn_image_0000001127125248.png) |
+| peachpuff            | \#ffdab9 | ![zh-cn_image_0000001173324769](figures/zh-cn_image_0000001173324769.png) |
+| peru                 | \#cd853f | ![zh-cn_image_0000001173164843](figures/zh-cn_image_0000001173164843.png) |
+| pink                 | \#ffc0cb | ![zh-cn_image_0000001127125242](figures/zh-cn_image_0000001127125242.png) |
+| plum                 | \#dda0dd | ![zh-cn_image_0000001173324831](figures/zh-cn_image_0000001173324831.png) |
+| powderblue           | \#b0e0e6 | ![zh-cn_image_0000001127285010](figures/zh-cn_image_0000001127285010.png) |
+| purple               | \#800080 | ![zh-cn_image_0000001127285002](figures/zh-cn_image_0000001127285002.png) |
+| rebeccapurple        | \#663399 | ![zh-cn_image_0000001173164907](figures/zh-cn_image_0000001173164907.png) |
+| red                  | \#ff0000 | ![zh-cn_image_0000001127125254](figures/zh-cn_image_0000001127125254.png) |
+| rosybrown            | \#bc8f8f | ![zh-cn_image_0000001173324775](figures/zh-cn_image_0000001173324775.png) |
+| royalblue            | \#4169e1 | ![zh-cn_image_0000001127284972](figures/zh-cn_image_0000001127284972.png) |
+| saddlebrown          | \#8b4513 | ![zh-cn_image_0000001127125250](figures/zh-cn_image_0000001127125250.png) |
+| salmon               | \#fa8072 | ![zh-cn_image_0000001127285064](figures/zh-cn_image_0000001127285064.png) |
+| sandybrown           | \#f4a460 | ![zh-cn_image_0000001173324777](figures/zh-cn_image_0000001173324777.png) |
+| seagreen             | \#2e8b57 | ![zh-cn_image_0000001173324733](figures/zh-cn_image_0000001173324733.png) |
+| seashell             | \#fff5ee | ![zh-cn_image_0000001127285062](figures/zh-cn_image_0000001127285062.png) |
+| sienna               | \#a0522d | ![zh-cn_image_0000001173164917](figures/zh-cn_image_0000001173164917.png) |
+| silver               | \#c0c0c0 | ![zh-cn_image_0000001173324743](figures/zh-cn_image_0000001173324743.png) |
+| skyblue              | \#87ceeb | ![zh-cn_image_0000001127284970](figures/zh-cn_image_0000001127284970.png) |
+| slateblue            | \#6a5acd | ![zh-cn_image_0000001173164915](figures/zh-cn_image_0000001173164915.png) |
+| slategray            | \#708090 | ![zh-cn_image_0000001173324815](figures/zh-cn_image_0000001173324815.png) |
+| slategrey            | \#708090 | ![zh-cn_image_0000001127284982](figures/zh-cn_image_0000001127284982.png) |
+| snow                 | \#fffafa | ![zh-cn_image_0000001173324731](figures/zh-cn_image_0000001173324731.png) |
+| springgreen          | \#00ff7f | ![zh-cn_image_0000001127285060](figures/zh-cn_image_0000001127285060.png) |
+| steelblue            | \#4682b4 | ![zh-cn_image_0000001127125240](figures/zh-cn_image_0000001127125240.png) |
+| tan                  | \#d2b48c | ![zh-cn_image_0000001173324747](figures/zh-cn_image_0000001173324747.png) |
+| teal                 | \#008080 | ![zh-cn_image_0000001173324741](figures/zh-cn_image_0000001173324741.png) |
+| thistle              | \#d8Bfd8 | ![zh-cn_image_0000001173164913](figures/zh-cn_image_0000001173164913.png) |
+| tomato               | \#ff6347 | ![zh-cn_image_0000001173164909](figures/zh-cn_image_0000001173164909.png) |
+| turquoise            | \#40e0d0 | ![zh-cn_image_0000001173164837](figures/zh-cn_image_0000001173164837.png) |
+| violet               | \#ee82ee | ![zh-cn_image_0000001127125258](figures/zh-cn_image_0000001127125258.png) |
+| wheat                | \#f5deb3 | ![zh-cn_image_0000001127285068](figures/zh-cn_image_0000001127285068.png) |
+| white                | \#ffffff | ![zh-cn_image_0000001173324823](figures/zh-cn_image_0000001173324823.png) |
+| whitesmoke           | \#f5f5f5 | ![zh-cn_image_0000001127284992](figures/zh-cn_image_0000001127284992.png) |
+| yellow               | \#ffff00 | ![zh-cn_image_0000001173324837](figures/zh-cn_image_0000001173324837.png) |
+| yellowgreen          | \#9acd32 | ![zh-cn_image_0000001173164923](figures/zh-cn_image_0000001173164923.png) |

zh-cn/application-dev/reference/arkui-ts/Readme-CN.md

 # 基于TS扩展的声明式开发范式
 
-- 组件
-    - 通用
-        - 通用事件
-            - [点击事件](ts-universal-events-click.md)
-            - [触摸事件](ts-universal-events-touch.md)
-            - [挂载卸载事件](ts-universal-events-show-hide.md)
-            - [拖拽事件](ts-universal-events-drag-drop.md)
-            - [按键事件](ts-universal-events-key.md)
-            - [焦点事件](ts-universal-focus-event.md)
-            - [鼠标事件](ts-universal-mouse-key.md)
-            - [组件区域变化事件](ts-universal-component-area-change-event.md)
-        - 通用属性
-            - [尺寸设置](ts-universal-attributes-size.md)
-            - [位置设置](ts-universal-attributes-location.md)
-            - [布局约束](ts-universal-attributes-layout-constraints.md)
-            - [Flex布局](ts-universal-attributes-flex-layout.md)
-            - [边框设置](ts-universal-attributes-border.md)
-            - [背景设置](ts-universal-attributes-background.md)
-            - [透明度设置](ts-universal-attributes-opacity.md)
-            - [显隐控制](ts-universal-attributes-visibility.md)
-            - [禁用控制](ts-universal-attributes-enable.md)
-            - [浮层](ts-universal-attributes-overlay.md)
-            - [Z序控制](ts-universal-attributes-z-order.md)
-            - [图形变换](ts-universal-attributes-transformation.md)
-            - [图像效果](ts-universal-attributes-image-effect.md)
-            - [形状裁剪](ts-universal-attributes-sharp-clipping.md)
-            - [文本样式设置](ts-universal-attributes-text-style.md)
-            - [栅格设置](ts-universal-attributes-grid.md)
-            - [颜色渐变](ts-universal-attributes-gradient-color.md)
-            - [Popup控制](ts-universal-attributes-popup.md)
-            - [Menu控制](ts-universal-attributes-menu.md)
-            - [点击控制](ts-universal-attributes-click.md)
-            - [焦点控制](ts-universal-attributes-focus.md)
-            - [悬浮态效果](ts-universal-attributes-hover-effect.md)
-            - [组件标识](ts-universal-attributes-component-id.md)
-            - [触摸热区设置](ts-universal-attributes-touch-target.md)
-            - [多态样式](ts-universal-attributes-polymorphic-style.md)
-        - 手势处理
-            - [绑定手势方法](ts-gesture-settings.md)
-            - 基础手势
-                - [TapGesture](ts-basic-gestures-tapgesture.md)
-                - [LongPressGesture](ts-basic-gestures-longpressgesture.md)
-                - [PanGesture](ts-basic-gestures-pangesture.md)
-                - [PinchGesture](ts-basic-gestures-pinchgesture.md)
-                - [RotationGesture](ts-basic-gestures-rotationgesture.md)
-                - [SwipeGesture](ts-basic-gestures-swipegesture.md)
-            - [组合手势](ts-combined-gestures.md)
-    - 基础组件
-        - [Blank](ts-basic-components-blank.md)
-        - [Button](ts-basic-components-button.md)
-        - [Checkbox](ts-basic-components-checkbox.md)
-        - [CheckboxGroup](ts-basic-components-checkboxgroup.md)
-        - [DataPanel](ts-basic-components-datapanel.md)
-        - [DatePicker](ts-basic-components-datepicker.md)
-        - [Divider](ts-basic-components-divider.md)
-        - [Gauge](ts-basic-components-gauge.md)
-        - [Image](ts-basic-components-image.md)
-        - [ImageAnimator](ts-basic-components-imageanimator.md)
-        - [LoadingProgress](ts-basic-components-loadingprogress.md)
-        - [Marquee](ts-basic-components-marquee.md)
-        - [Navigation](ts-basic-components-navigation.md)
-        - [Progress](ts-basic-components-progress.md)
-        - [QRCode](ts-basic-components-qrcode.md)
-        - [Radio](ts-basic-components-radio.md)
-        - [Rating](ts-basic-components-rating.md)
-        - [RichText](ts-basic-components-richtext.md)
-        - [ScrollBar](ts-basic-components-scrollbar.md)
-        - [Search](ts-basic-components-search.md)
-        - [Select](ts-basic-components-select.md)
-        - [Slider](ts-basic-components-slider.md)
-        - [Span](ts-basic-components-span.md)
-        - [Stepper](ts-basic-components-stepper.md)
-        - [StepperItem](ts-basic-components-stepperitem.md)
-        - [Text](ts-basic-components-text.md)
-        - [TextArea](ts-basic-components-textarea.md)
-        - [TextClock](ts-basic-components-textclock.md)
-        - [TextInput](ts-basic-components-textinput.md)
-        - [TextPicker](ts-basic-components-textpicker.md)
-        - [TextTimer](ts-basic-components-texttimer.md)
-        - [TimePicker](ts-basic-components-timepicker.md)
-        - [Toggle](ts-basic-components-toggle.md)
-        - [Web](ts-basic-components-web.md)
-        - [Xcomponent](ts-basic-components-xcomponent.md)
-    - 容器组件
-        - [AlphabetIndexer](ts-container-alphabet-indexer.md)
-        - [Badge](ts-container-badge.md)
-        - [Column](ts-container-column.md)
-        - [ColumnSplit](ts-container-columnsplit.md)
-        - [Counter](ts-container-counter.md)
-        - [Flex](ts-container-flex.md)
-        - [GridContainer](ts-container-gridcontainer.md)
-        - [Grid](ts-container-grid.md)
-        - [GridItem](ts-container-griditem.md)
-        - [List](ts-container-list.md)
-        - [ListItem](ts-container-listitem.md)
-        - [Navigator](ts-container-navigator.md)
-        - [Panel](ts-container-panel.md)
-        - [Refresh](ts-container-refresh.md)
-        - [Row](ts-container-row.md)
-        - [RowSplit](ts-container-rowsplit.md)
-        - [Scroll](ts-container-scroll.md)
-        - [SideBarContainer](ts-container-sidebarcontainer.md)
-        - [Stack](ts-container-stack.md)
-        - [Swiper](ts-container-swiper.md)
-        - [Tabs](ts-container-tabs.md)
-        - [TabContent](ts-container-tabcontent.md)
-    - 媒体组件
-        - [Video](ts-media-components-video.md)
-    - 绘制组件
-        - [Circle](ts-drawing-components-circle.md)
-        - [Ellipse](ts-drawing-components-ellipse.md)
-        - [Line](ts-drawing-components-line.md)
-        - [Polyline](ts-drawing-components-polyline.md)
-        - [Polygon](ts-drawing-components-polygon.md)
-        - [Path](ts-drawing-components-path.md)
-        - [Rect](ts-drawing-components-rect.md)
-        - [Shape](ts-drawing-components-shape.md)
-    - 画布组件
-        - [Canvas](ts-components-canvas-canvas.md)
-        - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md)
-        - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md)
-        - [Lottie](ts-components-canvas-lottie.md)
-        - [Path2D对象](ts-components-canvas-path2d.md)
-        - [CanvasGradient对象](ts-components-canvas-canvasgradient.md)
-        - [ImageBitmap对象](ts-components-canvas-imagebitmap.md)
-        - [ImageData对象](ts-components-canvas-imagedata.md)
+- 组件通用信息
+    - 通用事件
+        - [点击事件](ts-universal-events-click.md)
+        - [触摸事件](ts-universal-events-touch.md)
+        - [挂载卸载事件](ts-universal-events-show-hide.md)
+        - [拖拽事件](ts-universal-events-drag-drop.md)
+        - [按键事件](ts-universal-events-key.md)
+        - [焦点事件](ts-universal-focus-event.md)
+        - [鼠标事件](ts-universal-mouse-key.md)
+        - [组件区域变化事件](ts-universal-component-area-change-event.md)
+    - 通用属性
+        - [尺寸设置](ts-universal-attributes-size.md)
+        - [位置设置](ts-universal-attributes-location.md)
+        - [布局约束](ts-universal-attributes-layout-constraints.md)
+        - [Flex布局](ts-universal-attributes-flex-layout.md)
+        - [边框设置](ts-universal-attributes-border.md)
+        - [背景设置](ts-universal-attributes-background.md)
+        - [透明度设置](ts-universal-attributes-opacity.md)
+        - [显隐控制](ts-universal-attributes-visibility.md)
+        - [禁用控制](ts-universal-attributes-enable.md)
+        - [浮层](ts-universal-attributes-overlay.md)
+        - [Z序控制](ts-universal-attributes-z-order.md)
+        - [图形变换](ts-universal-attributes-transformation.md)
+        - [图像效果](ts-universal-attributes-image-effect.md)
+        - [形状裁剪](ts-universal-attributes-sharp-clipping.md)
+        - [文本样式设置](ts-universal-attributes-text-style.md)
+        - [栅格设置](ts-universal-attributes-grid.md)
+        - [颜色渐变](ts-universal-attributes-gradient-color.md)
+        - [Popup控制](ts-universal-attributes-popup.md)
+        - [Menu控制](ts-universal-attributes-menu.md)
+        - [点击控制](ts-universal-attributes-click.md)
+        - [焦点控制](ts-universal-attributes-focus.md)
+        - [悬浮态效果](ts-universal-attributes-hover-effect.md)
+        - [组件标识](ts-universal-attributes-component-id.md)
+        - [触摸热区设置](ts-universal-attributes-touch-target.md)
+        - [多态样式](ts-universal-attributes-polymorphic-style.md)
+    - 手势处理
+        - [绑定手势方法](ts-gesture-settings.md)
+        - 基础手势
+            - [TapGesture](ts-basic-gestures-tapgesture.md)
+            - [LongPressGesture](ts-basic-gestures-longpressgesture.md)
+            - [PanGesture](ts-basic-gestures-pangesture.md)
+            - [PinchGesture](ts-basic-gestures-pinchgesture.md)
+            - [RotationGesture](ts-basic-gestures-rotationgesture.md)
+            - [SwipeGesture](ts-basic-gestures-swipegesture.md)
+        - [组合手势](ts-combined-gestures.md)
+- 基础组件
+    - [Blank](ts-basic-components-blank.md)
+    - [Button](ts-basic-components-button.md)
+    - [Checkbox](ts-basic-components-checkbox.md)
+    - [CheckboxGroup](ts-basic-components-checkboxgroup.md)
+    - [DataPanel](ts-basic-components-datapanel.md)
+    - [DatePicker](ts-basic-components-datepicker.md)
+    - [Divider](ts-basic-components-divider.md)
+    - [Gauge](ts-basic-components-gauge.md)
+    - [Image](ts-basic-components-image.md)
+    - [ImageAnimator](ts-basic-components-imageanimator.md)
+    - [LoadingProgress](ts-basic-components-loadingprogress.md)
+    - [Marquee](ts-basic-components-marquee.md)
+    - [Navigation](ts-basic-components-navigation.md)
+    - [Progress](ts-basic-components-progress.md)
+    - [QRCode](ts-basic-components-qrcode.md)
+    - [Radio](ts-basic-components-radio.md)
+    - [Rating](ts-basic-components-rating.md)
+    - [RichText](ts-basic-components-richtext.md)
+    - [ScrollBar](ts-basic-components-scrollbar.md)
+    - [Search](ts-basic-components-search.md)
+    - [Select](ts-basic-components-select.md)
+    - [Slider](ts-basic-components-slider.md)
+    - [Span](ts-basic-components-span.md)
+    - [Stepper](ts-basic-components-stepper.md)
+    - [StepperItem](ts-basic-components-stepperitem.md)
+    - [Text](ts-basic-components-text.md)
+    - [TextArea](ts-basic-components-textarea.md)
+    - [TextClock](ts-basic-components-textclock.md)
+    - [TextInput](ts-basic-components-textinput.md)
+    - [TextPicker](ts-basic-components-textpicker.md)
+    - [TextTimer](ts-basic-components-texttimer.md)
+    - [TimePicker](ts-basic-components-timepicker.md)
+    - [Toggle](ts-basic-components-toggle.md)
+    - [Web](ts-basic-components-web.md)
+    - [Xcomponent](ts-basic-components-xcomponent.md)
+- 容器组件
+    - [AlphabetIndexer](ts-container-alphabet-indexer.md)
+    - [Badge](ts-container-badge.md)
+    - [Column](ts-container-column.md)
+    - [ColumnSplit](ts-container-columnsplit.md)
+    - [Counter](ts-container-counter.md)
+    - [Flex](ts-container-flex.md)
+    - [GridContainer](ts-container-gridcontainer.md)
+    - [Grid](ts-container-grid.md)
+    - [GridItem](ts-container-griditem.md)
+    - [List](ts-container-list.md)
+    - [ListItem](ts-container-listitem.md)
+    - [Navigator](ts-container-navigator.md)
+    - [Panel](ts-container-panel.md)
+    - [Refresh](ts-container-refresh.md)
+    - [Row](ts-container-row.md)
+    - [RowSplit](ts-container-rowsplit.md)
+    - [Scroll](ts-container-scroll.md)
+    - [SideBarContainer](ts-container-sidebarcontainer.md)
+    - [Stack](ts-container-stack.md)
+    - [Swiper](ts-container-swiper.md)
+    - [Tabs](ts-container-tabs.md)
+    - [TabContent](ts-container-tabcontent.md)
+- 媒体组件
+    - [Video](ts-media-components-video.md)
+- 绘制组件
+    - [Circle](ts-drawing-components-circle.md)
+    - [Ellipse](ts-drawing-components-ellipse.md)
+    - [Line](ts-drawing-components-line.md)
+    - [Polyline](ts-drawing-components-polyline.md)
+    - [Polygon](ts-drawing-components-polygon.md)
+    - [Path](ts-drawing-components-path.md)
+    - [Rect](ts-drawing-components-rect.md)
+    - [Shape](ts-drawing-components-shape.md)
+- 画布组件
+    - [Canvas](ts-components-canvas-canvas.md)
+    - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md)
+    - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md)
+    - [Lottie](ts-components-canvas-lottie.md)
+    - [Path2D对象](ts-components-canvas-path2d.md)
+    - [CanvasGradient对象](ts-components-canvas-canvasgradient.md)
+    - [ImageBitmap对象](ts-components-canvas-imagebitmap.md)
+    - [ImageData对象](ts-components-canvas-imagedata.md)
+
+
 - 动画
     - [属性动画](ts-animatorproperty.md)
     - [显式动画](ts-explicit-animation.md)

zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md

@@ -12,9 +12,9 @@
 CanvasRenderingContext2D(setting: RenderingContextSetting)
 
 - 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 | 
+  | 参数名     | 参数类型                                     | 必填   | 默认值  | 参数描述                                     |
+  | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+  | setting | [RenderingContextSettings](#renderingcontextsettings) | 是    | -    | 见[RenderingContextSettings](#renderingcontextsettings)。 |
 
 
 ### RenderingContextSettings
@@ -24,33 +24,33 @@ RenderingContextSettings(antialias?: bool)
 用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。
 
 - 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 | 
+  | 参数名       | 参数类型 | 必填   | 默认值   | 参数描述             |
+  | --------- | ---- | ---- | ----- | ---------------- |
+  | antialias | bool | 否    | false | 表明canvas是否开启抗锯齿。 |
 
 
 ## 属性
 
-| 名称 | 类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
-| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 |
-| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
-| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 |
-| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 |
-| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 |
-| [font](#font) | string | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。 |
-| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 |
-| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 |
-| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
-| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 |
-| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 |
-| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 |
-| [shadowColor](#shadowcolor) | &lt;color&gt; | - | 设置绘制阴影时的阴影颜色。 |
-| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 |
-| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 |
-| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 |
-| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。 |
+| 名称                                       | 类型                                       | 默认值                                      | 描述                                       |
+| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| [fillStyle](#fillstyle)                  | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | -                                        | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
+| [lineWidth](#linewidth)                  | number                                   | -                                        | 设置绘制线条的宽度。                               |
+| [strokeStyle](#strokestyle)              | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | -                                        | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
+| [lineCap](#linecap)                      | string                                   | 'butt'                                   | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 |
+| [lineJoin](#linejoin)                    | string                                   | 'miter'                                  | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 |
+| [miterLimit](#miterlimit)                | number                                   | 10                                       | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。             |
+| [font](#font)                            | string                                   | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。 |
+| [textAlign](#textalign)                  | string                                   | 'left'                                   | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 |
+| [textBaseline](#textbaseline)            | string                                   | 'alphabetic'                             | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 |
+| [globalAlpha](#globalalpha)              | number                                   | -                                        | 设置透明度，0.0为完全透明，1.0为完全不透明。                |
+| [lineDashOffset](#linedashoffset)        | number                                   | 0.0                                      | 设置画布的虚线偏移量，精度为float。                     |
+| [globalCompositeOperation](#globalcompositeoperation) | string                                   | 'source-over'                            | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 |
+| [shadowBlur](#shadowblur)                | number                                   | 0.0                                      | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。            |
+| [shadowColor](#shadowcolor)              | &lt;color&gt;                            | -                                        | 设置绘制阴影时的阴影颜色。                            |
+| [shadowOffsetX](#shadowoffsetx)          | number                                   | -                                        | 设置绘制阴影时和原有对象的水平偏移值。                      |
+| [shadowOffsetY](#shadowoffsety)          | number                                   | -                                        | 设置绘制阴影时和原有对象的垂直偏移值。                      |
+| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean                                  | true                                     | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。  |
+| imageSmoothingQuality                    | string                                   | 'low'                                    | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。 |
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
 > &lt;color&gt;类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
@@ -427,19 +427,19 @@ struct LineDashOffset {
 
 ### globalCompositeOperation
 
-| 名称 | 描述 | 
-| -------- | -------- |
-| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 | 
-| source-atop | 在现有绘制内容顶部显示新绘制内容。 | 
-| source-in | 在现有绘制内容中显示新绘制内容。 | 
-| source-out | 在现有绘制内容之外显示新绘制内容。 | 
-| destination-over | 在新绘制内容上方显示现有绘制内容。 | 
-| destination-atop | 在新绘制内容顶部显示现有绘制内容。 | 
-| destination-in | 在新绘制内容中显示现有绘制内容。 | 
-| destination-out | 在新绘制内容外显示现有绘制内容。 | 
-| lighter | 显示新绘制内容和现有绘制内容。 | 
-| copy | 显示新绘制内容而忽略现有绘制内容。 | 
-| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 | 
+| 名称               | 描述                       |
+| ---------------- | ------------------------ |
+| source-over      | 在现有绘制内容上显示新绘制内容，属于默认值。   |
+| source-atop      | 在现有绘制内容顶部显示新绘制内容。        |
+| source-in        | 在现有绘制内容中显示新绘制内容。         |
+| source-out       | 在现有绘制内容之外显示新绘制内容。        |
+| destination-over | 在新绘制内容上方显示现有绘制内容。        |
+| destination-atop | 在新绘制内容顶部显示现有绘制内容。        |
+| destination-in   | 在新绘制内容中显示现有绘制内容。         |
+| destination-out  | 在新绘制内容外显示现有绘制内容。         |
+| lighter          | 显示新绘制内容和现有绘制内容。          |
+| copy             | 显示新绘制内容而忽略现有绘制内容。        |
+| xor              | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
 
 ```
 @Entry
@@ -641,12 +641,12 @@ fillRect(x: number, y: number, w: number, h: number): void
 填充一个矩形。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 说明 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | 是 | 0 | 指定矩形左上角点的x坐标。 | 
-  | y | number | 是 | 0 | 指定矩形左上角点的y坐标。 | 
-  | width | number | 是 | 0 | 指定矩形的宽度。 | 
-  | height | number | 是 | 0 | 指定矩形的高度。 | 
+  | 参数     | 类型     | 必填   | 默认值  | 说明            |
+  | ------ | ------ | ---- | ---- | ------------- |
+  | x      | number | 是    | 0    | 指定矩形左上角点的x坐标。 |
+  | y      | number | 是    | 0    | 指定矩形左上角点的y坐标。 |
+  | width  | number | 是    | 0    | 指定矩形的宽度。      |
+  | height | number | 是    | 0    | 指定矩形的高度。      |
 
 - 示例
   ```
@@ -682,12 +682,12 @@ strokeRect(x: number, y: number, w: number, h: number): void
 绘制具有边框的矩形，矩形内部不填充。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 说明 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | 是 | 0 | 指定矩形的左上角x坐标。 | 
-  | y | number | 是 | 0 | 指定矩形的左上角y坐标。 | 
-  | width | number | 是 | 0 | 指定矩形的宽度。 | 
-  | height | number | 是 | 0 | 指定矩形的高度。 | 
+  | 参数     | 类型     | 必填   | 默认值  | 说明           |
+  | ------ | ------ | ---- | ---- | ------------ |
+  | x      | number | 是    | 0    | 指定矩形的左上角x坐标。 |
+  | y      | number | 是    | 0    | 指定矩形的左上角y坐标。 |
+  | width  | number | 是    | 0    | 指定矩形的宽度。     |
+  | height | number | 是    | 0    | 指定矩形的高度。     |
 
 - 示例
   ```
@@ -722,12 +722,12 @@ clearRect(x: number, y: number, w: number, h: number): void
 删除指定区域内的绘制内容。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | 是 | 0 | 指定矩形上的左上角x坐标。 | 
-  | y | number | 是 | 0 | 指定矩形上的左上角y坐标。 | 
-  | width | number | 是 | 0 | 指定矩形的宽度。 | 
-  | height | number | 是 | 0 | 指定矩形的高度。 | 
+  | 参数     | 类型     | 必填   | 默认值  | 描述            |
+  | ------ | ------ | ---- | ---- | ------------- |
+  | x      | number | 是    | 0    | 指定矩形上的左上角x坐标。 |
+  | y      | number | 是    | 0    | 指定矩形上的左上角y坐标。 |
+  | width  | number | 是    | 0    | 指定矩形的宽度。      |
+  | height | number | 是    | 0    | 指定矩形的高度。      |
 
 - 示例
   ```
@@ -764,11 +764,11 @@ fillText(text: string, x: number, y: number): void
 绘制填充类文本。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 说明 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | text | string | 是 | “” | 需要绘制的文本内容。 | 
-  | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | 
-  | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | 
+  | 参数   | 类型     | 必填   | 默认值  | 说明              |
+  | ---- | ------ | ---- | ---- | --------------- |
+  | text | string | 是    | “”   | 需要绘制的文本内容。      |
+  | x    | number | 是    | 0    | 需要绘制的文本的左下角x坐标。 |
+  | y    | number | 是    | 0    | 需要绘制的文本的左下角y坐标。 |
 
 - 示例
   ```
@@ -804,11 +804,11 @@ strokeText(text: string, x: number, y: number): void
 绘制描边类文本。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | text | string | 是 | “” | 需要绘制的文本内容。 | 
-  | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | 
-  | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | 
+  | 参数   | 类型     | 必填   | 默认值  | 描述              |
+  | ---- | ------ | ---- | ---- | --------------- |
+  | text | string | 是    | “”   | 需要绘制的文本内容。      |
+  | x    | number | 是    | 0    | 需要绘制的文本的左下角x坐标。 |
+  | y    | number | 是    | 0    | 需要绘制的文本的左下角y坐标。 |
 
 - 示例
   ```
@@ -844,19 +844,19 @@ measureText(text: string): TextMetrics
 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 说明 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | text | string | 是 | "" | 需要进行测量的文本。 | 
+  | 参数   | 类型     | 必填   | 默认值  | 说明         |
+  | ---- | ------ | ---- | ---- | ---------- |
+  | text | string | 是    | ""   | 需要进行测量的文本。 |
 
 - 返回值
-  | 类型 | 说明 | 
-  | -------- | -------- |
-  | TextMetrics | 文本的尺寸信息 | 
+  | 类型          | 说明      |
+  | ----------- | ------- |
+  | TextMetrics | 文本的尺寸信息 |
 
 - TextMetrics类型描述
-  | 属性 | 类型 | 描述 | 
-  | -------- | -------- | -------- |
-  | width | number | 字符串的宽度。 | 
+  | 属性    | 类型     | 描述      |
+  | ----- | ------ | ------- |
+  | width | number | 字符串的宽度。 |
 
 - 示例
   ```
@@ -893,9 +893,9 @@ stroke(path?: Path2D): void
 进行边框绘制操作。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
+  | 参数   | 类型                                       | 必填   | 默认值  | 描述           |
+  | ---- | ---------------------------------------- | ---- | ---- | ------------ |
+  | path | [Path2D](ts-components-canvas-path2d.md) | 否    | null | 需要绘制的Path2D。 |
 
 - 示例
   ```
@@ -904,7 +904,7 @@ stroke(path?: Path2D): void
   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)
@@ -940,7 +940,7 @@ beginPath(): void
   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)
@@ -972,10 +972,10 @@ moveTo(x: number, y: number): void
 路径从当前点移动到指定点。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 说明 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | 是 | 0 | 指定位置的x坐标。 | 
-  | y | number | 是 | 0 | 指定位置的y坐标。 | 
+  | 参数   | 类型     | 必填   | 默认值  | 说明        |
+  | ---- | ------ | ---- | ---- | --------- |
+  | x    | number | 是    | 0    | 指定位置的x坐标。 |
+  | y    | number | 是    | 0    | 指定位置的y坐标。 |
 
 - 示例
   ```
@@ -984,7 +984,7 @@ moveTo(x: number, y: number): void
   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)
@@ -1014,10 +1014,10 @@ lineTo(x: number, y: number): void
 从当前点到指定点进行路径连接。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | 是 | 0 | 指定位置的x坐标。 | 
-  | y | number | 是 | 0 | 指定位置的y坐标。 | 
+  | 参数   | 类型     | 必填   | 默认值  | 描述        |
+  | ---- | ------ | ---- | ---- | --------- |
+  | x    | number | 是    | 0    | 指定位置的x坐标。 |
+  | y    | number | 是    | 0    | 指定位置的y坐标。 |
 
 - 示例
   ```
@@ -1026,7 +1026,7 @@ lineTo(x: number, y: number): void
   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)
@@ -1062,7 +1062,7 @@ closePath(): void
   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)
@@ -1094,10 +1094,10 @@ createPattern(image: ImageBitmap, repetition: string): void
 通过指定图像和重复方式创建图片填充的模板。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 |
-  | repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
+  | 参数         | 类型                                       | 必填   | 默认值  | 描述                                       |
+  | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+  | image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是    | null | 图源对象，具体参考ImageBitmap对象。                  |
+  | repetition | string                                   | 是    | “”   | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
 
 - 示例
   ```
@@ -1107,7 +1107,7 @@ createPattern(image: ImageBitmap, repetition: string): void
     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)
@@ -1136,14 +1136,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
 创建三次贝赛尔曲线的路径。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | 
-  | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | 
-  | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | 
-  | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | 
-  | x | number | 是 | 0 | 路径结束时的x坐标值。 | 
-  | y | number | 是 | 0 | 路径结束时的y坐标值。 | 
+  | 参数   | 类型     | 必填   | 默认值  | 描述             |
+  | ---- | ------ | ---- | ---- | -------------- |
+  | cp1x | number | 是    | 0    | 第一个贝塞尔参数的x坐标值。 |
+  | cp1y | number | 是    | 0    | 第一个贝塞尔参数的y坐标值。 |
+  | cp2x | number | 是    | 0    | 第二个贝塞尔参数的x坐标值。 |
+  | cp2y | number | 是    | 0    | 第二个贝塞尔参数的y坐标值。 |
+  | x    | number | 是    | 0    | 路径结束时的x坐标值。    |
+  | y    | number | 是    | 0    | 路径结束时的y坐标值。    |
 
 - 示例
   ```
@@ -1152,7 +1152,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
   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)
@@ -1182,12 +1182,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
 创建二次贝赛尔曲线的路径。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | 
-  | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | 
-  | x | number | 是 | 0 | 路径结束时的x坐标值。 | 
-  | y | number | 是 | 0 | 路径结束时的y坐标值。 | 
+  | 参数   | 类型     | 必填   | 默认值  | 描述          |
+  | ---- | ------ | ---- | ---- | ----------- |
+  | cpx  | number | 是    | 0    | 贝塞尔参数的x坐标值。 |
+  | cpy  | number | 是    | 0    | 贝塞尔参数的y坐标值。 |
+  | x    | number | 是    | 0    | 路径结束时的x坐标值。 |
+  | y    | number | 是    | 0    | 路径结束时的y坐标值。 |
 
 - 示例
   ```
@@ -1225,14 +1225,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
 绘制弧线路径。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | 是 | 0 | 弧线圆心的x坐标值。 | 
-  | y | number | 是 | 0 | 弧线圆心的y坐标值。 | 
-  | radius | number | 是 | 0 | 弧线的圆半径。 | 
-  | startAngle | number | 是 | 0 | 弧线的起始弧度。 | 
-  | endAngle | number | 是 | 0 | 弧线的终止弧度。 | 
-  | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | 
+  | 参数            | 类型      | 必填   | 默认值   | 描述         |
+  | ------------- | ------- | ---- | ----- | ---------- |
+  | x             | number  | 是    | 0     | 弧线圆心的x坐标值。 |
+  | y             | number  | 是    | 0     | 弧线圆心的y坐标值。 |
+  | radius        | number  | 是    | 0     | 弧线的圆半径。    |
+  | startAngle    | number  | 是    | 0     | 弧线的起始弧度。   |
+  | endAngle      | number  | 是    | 0     | 弧线的终止弧度。   |
+  | anticlockwise | boolean | 否    | false | 是否逆时针绘制圆弧。 |
 
 - 示例
   ```
@@ -1241,7 +1241,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
   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)
@@ -1270,13 +1270,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
 依据圆弧经过的点和圆弧半径创建圆弧路径。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | 
-  | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | 
-  | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | 
-  | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | 
-  | radius | number | 是 | 0 | 圆弧的圆半径值。 | 
+  | 参数     | 类型     | 必填   | 默认值  | 描述              |
+  | ------ | ------ | ---- | ---- | --------------- |
+  | x1     | number | 是    | 0    | 圆弧经过的第一个点的x坐标值。 |
+  | y1     | number | 是    | 0    | 圆弧经过的第一个点的y坐标值。 |
+  | x2     | number | 是    | 0    | 圆弧经过的第二个点的x坐标值。 |
+  | y2     | number | 是    | 0    | 圆弧经过的第二个点的y坐标值。 |
+  | radius | number | 是    | 0    | 圆弧的圆半径值。        |
 
 - 示例
   ```
@@ -1285,7 +1285,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
   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)
@@ -1314,16 +1314,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
 在规定的矩形区域绘制一个椭圆。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 说明 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | 
-  | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | 
-  | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | 
-  | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | 
-  | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | 
-  | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | 
-  | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | 
-  | anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 | 
+  | 参数            | 类型      | 必填   | 默认值   | 说明                |
+  | ------------- | ------- | ---- | ----- | ----------------- |
+  | x             | number  | 是    | 0     | 椭圆圆心的x轴坐标。        |
+  | y             | number  | 是    | 0     | 椭圆圆心的y轴坐标。        |
+  | radiusX       | number  | 是    | 0     | 椭圆x轴的半径长度。        |
+  | radiusY       | number  | 是    | 0     | 椭圆y轴的半径长度。        |
+  | rotation      | number  | 是    | 0     | 椭圆的旋转角度，单位为弧度。    |
+  | startAngle    | number  | 是    | 0     | 椭圆绘制的起始点角度，以弧度表示。 |
+  | endAngle      | number  | 是    | 0     | 椭圆绘制的结束点角度，以弧度表示。 |
+  | anticlockwise | boolean | 否    | false | 是否以逆时针方向绘制椭圆。     |
 
 - 示例
 
@@ -1333,7 +1333,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
   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)
@@ -1351,7 +1351,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
     }
   }
   ```
-  
+
   ![zh-cn_image_0000001194192440](figures/zh-cn_image_0000001194192440.png)
 
 
@@ -1362,12 +1362,12 @@ rect(x: number, y: number, width: number, height: number): void
 创建矩形路径。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | 
-  | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | 
-  | width | number | 是 | 0 | 指定矩形的宽度。 | 
-  | height | number | 是 | 0 | 指定矩形的高度。 | 
+  | 参数     | 类型     | 必填   | 默认值  | 描述            |
+  | ------ | ------ | ---- | ---- | ------------- |
+  | x      | number | 是    | 0    | 指定矩形的左上角x坐标值。 |
+  | y      | number | 是    | 0    | 指定矩形的左上角y坐标值。 |
+  | width  | number | 是    | 0    | 指定矩形的宽度。      |
+  | height | number | 是    | 0    | 指定矩形的高度。      |
 
 - 示例
   ```
@@ -1376,7 +1376,7 @@ rect(x: number, y: number, width: number, height: number): void
   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)
@@ -1410,7 +1410,7 @@ fill(): void
   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)
@@ -1444,7 +1444,7 @@ clip(): void
   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)
@@ -1464,7 +1464,7 @@ clip(): void
     }
   }
   ```
-  
+
   ![zh-cn_image_0000001194032462](figures/zh-cn_image_0000001194032462.png)
 
 
@@ -1475,9 +1475,9 @@ rotate(rotate: number): void
 针对当前坐标轴进行顺时针旋转。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 | 
+  | 参数     | 类型     | 必填   | 默认值  | 描述                                       |
+  | ------ | ------ | ---- | ---- | ---------------------------------------- |
+  | rotate | number | 是    | 0    | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
 
 - 示例
   ```
@@ -1486,7 +1486,7 @@ rotate(rotate: number): void
   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)
@@ -1514,10 +1514,10 @@ scale(x: number, y: number): void
 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | 是 | 0 | 设置水平方向的缩放值。 | 
-  | y | number | 是 | 0 | 设置垂直方向的缩放值。 | 
+  | 参数   | 类型     | 必填   | 默认值  | 描述          |
+  | ---- | ------ | ---- | ---- | ----------- |
+  | x    | number | 是    | 0    | 设置水平方向的缩放值。 |
+  | y    | number | 是    | 0    | 设置垂直方向的缩放值。 |
 
 - 示例
   ```
@@ -1526,7 +1526,7 @@ scale(x: number, y: number): void
   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)
@@ -1556,20 +1556,20 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
 > 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
-> 
+>
 > - x' = scaleX \* x + skewY \* y + translateX
-> 
+>
 > - y' = skewX \* x + scaleY \* y + translateY
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | scaleX | number | 是 | 0 | 指定水平缩放值。 | 
-  | skewX | number | 是 | 0 | 指定水平倾斜值。 | 
-  | skewY | number | 是 | 0 | 指定垂直倾斜值。 | 
-  | scaleY | number | 是 | 0 | 指定垂直缩放值。 | 
-  | translateX | number | 是 | 0 | 指定水平移动值。 | 
-  | translateY | number | 是 | 0 | 指定垂直移动值。 | 
+  | 参数         | 类型     | 必填   | 默认值  | 描述       |
+  | ---------- | ------ | ---- | ---- | -------- |
+  | scaleX     | number | 是    | 0    | 指定水平缩放值。 |
+  | skewX      | number | 是    | 0    | 指定水平倾斜值。 |
+  | skewY      | number | 是    | 0    | 指定垂直倾斜值。 |
+  | scaleY     | number | 是    | 0    | 指定垂直缩放值。 |
+  | translateX | number | 是    | 0    | 指定水平移动值。 |
+  | translateY | number | 是    | 0    | 指定垂直移动值。 |
 
 - 示例
   ```
@@ -1578,7 +1578,7 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
   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)
@@ -1612,14 +1612,14 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl
 setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | scaleX | number | 是 | 0 | 指定水平缩放值。 | 
-  | skewX | number | 是 | 0 | 指定水平倾斜值。 | 
-  | skewY | number | 是 | 0 | 指定垂直倾斜值。 | 
-  | scaleY | number | 是 | 0 | 指定垂直缩放值。 | 
-  | translateX | number | 是 | 0 | 指定水平移动值。 | 
-  | translateY | number | 是 | 0 | 指定垂直移动值。 | 
+  | 参数         | 类型     | 必填   | 默认值  | 描述       |
+  | ---------- | ------ | ---- | ---- | -------- |
+  | scaleX     | number | 是    | 0    | 指定水平缩放值。 |
+  | skewX      | number | 是    | 0    | 指定水平倾斜值。 |
+  | skewY      | number | 是    | 0    | 指定垂直倾斜值。 |
+  | scaleY     | number | 是    | 0    | 指定垂直缩放值。 |
+  | translateX | number | 是    | 0    | 指定水平移动值。 |
+  | translateY | number | 是    | 0    | 指定垂直移动值。 |
 
 - 示例
   ```
@@ -1628,7 +1628,7 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
   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)
@@ -1659,10 +1659,10 @@ translate(x: number, y: number): void
 移动当前坐标系的原点。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | number | 是 | 0 | 设置水平平移量。 | 
-  | y | number | 是 | 0 | 设置竖直平移量。 | 
+  | 参数   | 类型     | 必填   | 默认值  | 描述       |
+  | ---- | ------ | ---- | ---- | -------- |
+  | x    | number | 是    | 0    | 设置水平平移量。 |
+  | y    | number | 是    | 0    | 设置竖直平移量。 |
 
 - 示例
   ```
@@ -1671,7 +1671,7 @@ translate(x: number, y: number): void
   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)
@@ -1704,17 +1704,17 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
 进行图像绘制。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 |
-  | sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
-  | sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
-  | sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
-  | sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
-  | dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
-  | dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
-  | dWidth | number | 否 | 0 | 绘制区域的宽度。 |
-  | dHeight | number | 否 | 0 | 绘制区域的高度。 |
+  | 参数      | 类型                                       | 必填   | 默认值  | 描述                                       |
+  | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+  | image   | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是    | null | 图片资源，请参考ImageBitmap或PixelMap。            |
+  | sx      | number                                   | 否    | 0    | 裁切源图像时距离源图像左上角的x坐标值。                     |
+  | sy      | number                                   | 否    | 0    | 裁切源图像时距离源图像左上角的y坐标值。                     |
+  | sWidth  | number                                   | 否    | 0    | 裁切源图像时需要裁切的宽度。                           |
+  | sHeight | number                                   | 否    | 0    | 裁切源图像时需要裁切的高度。                           |
+  | dx      | number                                   | 是    | 0    | 绘制区域左上角在x轴的位置。                           |
+  | dy      | number                                   | 是    | 0    | 绘制区域左上角在y&nbsp;轴的位置。                     |
+  | dWidth  | number                                   | 否    | 0    | 绘制区域的宽度。 当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 |
+  | dHeight | number                                   | 否    | 0    | 绘制区域的高度。 当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 |
 
 
 - 示例
@@ -1751,10 +1751,10 @@ createImageData(width: number, height: number): Object
 创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | number | 是 | 0 | ImageData的宽度。 | 
-  | height | number | 是 | 0 | ImageData的高度。 | 
+  | 参数     | 类型     | 必填   | 默认   | 描述            |
+  | ------ | ------ | ---- | ---- | ------------- |
+  | width  | number | 是    | 0    | ImageData的宽度。 |
+  | height | number | 是    | 0    | ImageData的高度。 |
 
 
 ### createImageData
@@ -1764,9 +1764,9 @@ createImageData(imageData: Object): Object
 创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | imagedata | Object | 是 | null | 复制现有的ImageData对象。 | 
+  | 参数        | 类型     | 必填   | 默认   | 描述                |
+  | --------- | ------ | ---- | ---- | ----------------- |
+  | imagedata | Object | 是    | null | 复制现有的ImageData对象。 |
 
 ### getPixelMap
 
@@ -1774,12 +1774,12 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
 
 以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | 
-  | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | 
-  | sw | number | 是 | 0 | 需要输出的区域的宽度。 | 
-  | sh | number | 是 | 0 | 需要输出的区域的高度。 | 
+  | 参数   | 类型     | 必填   | 默认值  | 描述              |
+  | ---- | ------ | ---- | ---- | --------------- |
+  | sx   | number | 是    | 0    | 需要输出的区域的左上角x坐标。 |
+  | sy   | number | 是    | 0    | 需要输出的区域的左上角y坐标。 |
+  | sw   | number | 是    | 0    | 需要输出的区域的宽度。     |
+  | sh   | number | 是    | 0    | 需要输出的区域的高度。     |
 
 ### getImageData
 
@@ -1787,12 +1787,12 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
 
 以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | 
-  | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | 
-  | sw | number | 是 | 0 | 需要输出的区域的宽度。 | 
-  | sh | number | 是 | 0 | 需要输出的区域的高度。 | 
+  | 参数   | 类型     | 必填   | 默认值  | 描述              |
+  | ---- | ------ | ---- | ---- | --------------- |
+  | sx   | number | 是    | 0    | 需要输出的区域的左上角x坐标。 |
+  | sy   | number | 是    | 0    | 需要输出的区域的左上角y坐标。 |
+  | sw   | number | 是    | 0    | 需要输出的区域的宽度。     |
+  | sh   | number | 是    | 0    | 需要输出的区域的高度。     |
 
 
 ### putImageData
@@ -1802,15 +1802,15 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
 使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | imagedata | Object | 是 | null | 包含像素值的ImageData对象。 | 
-  | dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 | 
-  | dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 | 
-  | dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | 
-  | dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | 
-  | dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 | 
-  | dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 | 
+  | 参数          | 类型     | 必填   | 默认值          | 描述                            |
+  | ----------- | ------ | ---- | ------------ | ----------------------------- |
+  | imagedata   | Object | 是    | null         | 包含像素值的ImageData对象。            |
+  | dx          | number | 是    | 0            | 填充区域在x轴方向的偏移量。                |
+  | dy          | number | 是    | 0            | 填充区域在y轴方向的偏移量。                |
+  | dirtyX      | number | 否    | 0            | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
+  | dirtyY      | number | 否    | 0            | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
+  | dirtyWidth  | number | 否    | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。               |
+  | dirtyHeight | number | 否    | imagedata的高度 | 源图像数据矩形裁切范围的高度。               |
 
 - 示例
   ```
@@ -1819,7 +1819,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
   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)
@@ -1859,7 +1859,7 @@ restore(): void
   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)
@@ -1890,7 +1890,7 @@ save(): void
   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)
@@ -1915,12 +1915,12 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
 创建一个线性渐变色。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x0 | number | 是 | 0 | 起点的x轴坐标。 | 
-  | y0 | number | 是 | 0 | 起点的y轴坐标。 | 
-  | x1 | number | 是 | 0 | 终点的x轴坐标。 | 
-  | y1 | number | 是 | 0 | 终点的y轴坐标。 | 
+  | 参数   | 类型     | 必填   | 默认值  | 描述       |
+  | ---- | ------ | ---- | ---- | -------- |
+  | x0   | number | 是    | 0    | 起点的x轴坐标。 |
+  | y0   | number | 是    | 0    | 起点的y轴坐标。 |
+  | x1   | number | 是    | 0    | 终点的x轴坐标。 |
+  | y1   | number | 是    | 0    | 终点的y轴坐标。 |
 
 - 示例
   ```
@@ -1961,14 +1961,14 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
 创建一个径向渐变色。
 
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x0 | number | 是 | 0 | 起始圆的x轴坐标。 | 
-  | y0 | number | 是 | 0 | 起始圆的y轴坐标。 | 
-  | r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 | 
-  | x1 | number | 是 | 0 | 终点圆的x轴坐标。 | 
-  | y1 | number | 是 | 0 | 终点圆的y轴坐标。 | 
-  | r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 | 
+  | 参数   | 类型     | 必填   | 默认值  | 描述                |
+  | ---- | ------ | ---- | ---- | ----------------- |
+  | x0   | number | 是    | 0    | 起始圆的x轴坐标。         |
+  | y0   | number | 是    | 0    | 起始圆的y轴坐标。         |
+  | r0   | number | 是    | 0    | 起始圆的半径。必须是非负且有限的。 |
+  | x1   | number | 是    | 0    | 终点圆的x轴坐标。         |
+  | y1   | number | 是    | 0    | 终点圆的y轴坐标。         |
+  | r1   | number | 是    | 0    | 终点圆的半径。必须为非负且有限的。 |
 
 - 示例
   ```

zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md

@@ -21,44 +21,44 @@
 Swiper(value:{controller?: SwiperController})
 
 - 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件翻页。 | 
+  | 参数名        | 参数类型                                  | 必填   | 默认值  | 参数描述                 |
+  | ---------- | ------------------------------------- | ---- | ---- | -------------------- |
+  | controller | [SwiperController](#swipercontroller) | 否    | null | 给组件绑定一个控制器，用来控制组件翻页。 |
 
 
 ## 属性
 
-| 名称 | 参数类型 | 默认值 | 描述 | 
-| -------- | -------- | -------- | -------- |
-| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 | 
-| autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 | 
-| interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 | 
-| indicator | boolean | true | 是否启用导航点指示器。 | 
-| loop | boolean | true | 是否开启循环。 | 
-| duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 | 
-| vertical | boolean | false | 是否为纵向滑动。 | 
-| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 |
-| cachedCount<sup>8+</sup> | number | 1 | 设置预加载子组件个数。 | 
-| disableSwipe<sup>8+</sup> | boolean | false | 禁用组件滑动切换功能。 |
-| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 |
-| indicatorStyle<sup>8+</sup>| {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | - |设置indicator样式：<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
+| 名称                          | 参数类型                                     | 默认值        | 描述                                       |
+| --------------------------- | ---------------------------------------- | ---------- | ---------------------------------------- |
+| index                       | number                                   | 0          | 设置当前在容器中显示的子组件的索引值。                      |
+| autoPlay                    | boolean                                  | false      | 子组件是否自动播放，自动播放状态下，导航点不可操作。               |
+| interval                    | number                                   | 3000       | 使用自动播放时播放的时间间隔，单位为毫秒。                    |
+| indicator                   | boolean                                  | true       | 是否启用导航点指示器。                              |
+| loop                        | boolean                                  | true       | 是否开启循环。<br> 设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。 |
+| duration                    | number                                   | 400        | 子组件切换的动画时长，单位为毫秒。                        |
+| vertical                    | boolean                                  | false      | 是否为纵向滑动。                                 |
+| itemSpace                   | Length                                   | 0          | 设置子组件与子组件之间间隙。                           |
+| cachedCount<sup>8+</sup>    | number                                   | 1          | 设置预加载子组件个数。                              |
+| disableSwipe<sup>8+</sup>   | boolean                                  | false      | 禁用组件滑动切换功能。                              |
+| curve<sup>8+</sup>          | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 |
+| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | -          | 设置indicator样式：<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
 
 
 ## SwiperController
 
 Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。
 
-| 接口名称 | 功能描述 | 
-| -------- | -------- |
-| showNext():void | 翻至下一页。 | 
-| showPrevious():void | 翻至上一页。 | 
+| 接口名称                | 功能描述   |
+| ------------------- | ------ |
+| showNext():void     | 翻至下一页。 |
+| showPrevious():void | 翻至上一页。 |
 
 
 ## 事件
 
-| 名称 | 功能描述 | 
-| -------- | -------- |
-| onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前显示的组件索引变化时触发该事件。 | 
+| 名称                                       | 功能描述               |
+| ---------------------------------------- | ------------------ |
+| onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前显示的组件索引变化时触发该事件。 |
 
 
 ## 示例

zh-cn/application-dev/ui/Readme-CN.md

@@ -80,10 +80,9 @@
             - [目录结构](ts-framework-directory.md)
             - [应用代码文件访问规则](ts-framework-file-access-rules.md)
         - [js标签配置](ts-framework-js-tag.md)
-        - 资源访问
-            - [访问应用资源](ts-application-resource-access.md)
-            - [访问系统资源](ts-system-resource-access.md)
-            - [媒体资源类型说明](ts-media-resource-type.md)
+        - 资源管理
+            - [资源文件的分类](ui-ts-basic-resource-file-categories.md)
+            - [资源访问](ts-resource-access.md)
         - [像素单位](ts-pixel-units.md)
         - [类型定义](ts-types.md)
     - 声明式语法

zh-cn/application-dev/ui/ts-media-resource-type.md

-# 媒体资源类型说明
-
-
-
-- 图片资源类型说明
-  | 格式 | 文件后缀名 | 
-  | -------- | -------- |
-  | JPEG | .jpg | 
-  | PNG | .png | 
-  | GIF | .gif | 
-  | SVG | .svg | 
-  | WEBP | .webp | 
-  | BMP | .bmp |
-
-- 音视频资源类型说明
-  | 格式 | 支持的文件类型 | 
-  | -------- | -------- |
-  | H.263 | .3gp <br>.mp4 | 
-  | H.264 AVC <br> Baseline Profile (BP) | .3gp <br>.mp4 | 
-  | MPEG-4 SP | .3gp | 
-  | VP8 | .webm <br> .mkv | 
-
-

zh-cn/application-dev/ui/ts-application-resource-access.md → zh-cn/application-dev/ui/ts-resource-access.md

-# 访问应用资源
+# 资源访问
 
 
-## 资源定义
+## 访问应用资源
 
-应用资源由开发者在工程的resources目录中定义，resources目录按照两级目录的形式来组织：
+在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。
 
-- 一级目录为base目录、限定词目录以及rawfile目录
-  - base目录是默认存在的目录。当应用的resources资源目录中没有与设备状态匹配的限定词目录时，会自动引用该目录中的资源文件。
-  - 限定词目录需要开发者自行创建，其可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括移动国家码和移动网络码、语言、文字、国家或地区、横竖屏、设备类型、颜色模式和屏幕密度等维度，限定词之间通过下划线（_）或者中划线（-）连接。
-  - 在引用rawfile中的资源时，不会根据系统的状态去匹配，rawfile目录中可以直接存放资源文件。
+引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
 
-- 二级目录为资源目录
-  - 用于存放字符串、颜色、浮点数等基础元素，以及媒体等资源文件。
-  - 当前支持的文件和资源类型如下：
-       | 文件名         | 资源类型         |
-       | ----------- | ------------ |
-       | color.json  | 颜色资源。        |
-       | float.json  | 间距、圆角、字体等资源。 |
-       | string.json | 字符串资源。       |
-       | plural.json | 字符串资源。       |
-       | media目录     | 图片资源。        |
+> **说明：**
+> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。
 
+在xxx.ets文件中，可以使用在resources目录中定义的资源。
 
-## 资源引用
+```ts
+Text($r('app.string.string_hello'))
+    .fontColor($r('app.color.color_hello'))
+    .fontSize($r('app.float.font_hello'))
+}
 
-在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。
+Text($r('app.string.string_world'))
+    .fontColor($r('app.color.color_world'))
+    .fontSize($r('app.float.font_world'))
+}
 
-引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
+Text($r('app.string.message_arrive', "five of the clock")) // 引用string资源，$r的第二个参数用于替换%s
+    .fontColor($r('app.color.color_hello'))
+    .fontSize($r('app.float.font_hello'))
+}
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。
+Text($r('app.plural.eat_apple', 5, 5))       // plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换
+    .fontColor($r('app.color.color_world'))
+    .fontSize($r('app.float.font_world'))
+}
+
+Image($r('app.media.my_background_image'))  // media资源的$r引用
 
+Image($rawfile('test.png'))                 // rawfile$r引用rawfile目录下图片
 
-## 示例
+Image($rawfile('newDir/newTest.png'))       // rawfile$r引用rawfile目录下图片
+```
+## 访问系统资源
 
-base目录中部分自定义资源如下所示：
+系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。
 
 
+开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。
+
+```ts
+Text('Hello')
+    .fontColor($r('sys.color.ohos_id_color_emphasize'))
+    .fontSize($r('sys.float.ohos_id_text_size_headline1'))
+    .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
+    .backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
+Image($r('sys.media.ohos_app_icon'))
+    .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
+    .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
+    .height(200)
+    .width(300)
 ```
-    resources
-      ├─ base 
-      │    ├─ element 
-      │    │   ├─ color.json
-      │    │   ├─ string.json
-      │    │   └─ float.json
-      │    └─ media
-      │       └─ my_background_image.png
-      └─ rawfile
-           ├─ test.png
-           └─ newDir
-               └─ newTest.png  
-```
+## 资源文件示例
 
 color.json文件的内容如下：
 
@@ -133,35 +141,7 @@ plural.json文件的内容如下：
 }
 ```
 
-  在ets文件中，可以使用在resources目录中定义的资源。
-
-```
-Text($r('app.string.string_hello'))
-    .fontColor($r('app.color.color_hello'))
-    .fontSize($r('app.float.font_hello'))
-}
-
-Text($r('app.string.string_world'))
-    .fontColor($r('app.color.color_world'))
-    .fontSize($r('app.float.font_world'))
-}
-
-Text($r('app.string.message_arrive', "five of the clock")) //引用string资源，$r的第二个参数用于替换%s
-    .fontColor($r('app.color.color_hello'))
-    .fontSize($r('app.float.font_hello'))
-}
-
-Text($r('app.plural.eat_apple', 5, 5)) //plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换
-    .fontColor($r('app.color.color_world'))
-    .fontSize($r('app.float.font_world'))
-}
-
-Image($r('app.media.my_background_image')) //media资源的$r引用
-
-Image($rawfile('test.png')) //rawfile$r引用rawfile目录下图片
-
-Image($rawfile('newDir/newTest.png')) //rawfile$r引用rawfile目录下图片
-```
+ 
 
 
 ## 相关实例

zh-cn/application-dev/ui/ts-system-resource-access.md

-# 访问系统资源
-
-
-系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。
-
-
-开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。
-
-```
-Text('Hello')
-    .fontColor($r('sys.color.ohos_id_color_emphasize'))
-    .fontSize($r('sys.float.ohos_id_text_size_headline1'))
-    .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
-    .backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
-Image($r('sys.media.ohos_app_icon'))
-    .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
-    .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
-    .height(200)
-    .width(300)
-```

zh-cn/application-dev/quick-start/basic-resource-file-categories.md → zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md

@@ -71,8 +71,62 @@ base目录与限定词目录下面可以创建资源组目录（包括element、
 
   **表3** 资源组目录说明
 
-| 资源组目录     | 目录说明                                     | 资源文件                                     |
-| --------- | ---------------------------------------- | ---------------------------------------- |
-| element   | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean，布尔型<br/>-&nbsp;color，颜色<br/>-&nbsp;float，浮点型<br/>-&nbsp;intarray，整型数组<br/>-&nbsp;integer，整型<br/>-&nbsp;pattern，样式<br/>-&nbsp;plural，复数形式<br/>-&nbsp;strarray，字符串数组<br/>-&nbsp;string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json |
-| media     | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。              | 文件名可自定义，例如：icon.png。                     |
-| profile   | 表示其他类型文件，以原始文件形式保存。                      | 文件名可自定义。                                 |
+| 资源组目录   | 目录说明                                     | 资源文件                                     |
+| ------- | ---------------------------------------- | ---------------------------------------- |
+| element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean，布尔型<br/>-&nbsp;color，颜色<br/>-&nbsp;float，浮点型<br/>-&nbsp;intarray，整型数组<br/>-&nbsp;integer，整型<br/>-&nbsp;pattern，样式<br/>-&nbsp;plural，复数形式<br/>-&nbsp;strarray，字符串数组<br/>-&nbsp;string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json |
+| media   | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。              | 文件名可自定义，例如：icon.png。                     |
+| profile | 表示其他类型文件，以原始文件形式保存。                      | 文件名可自定义。                                 |
+
+### 媒体资源类型说明
+
+表1 图片资源类型说明
+
+| 格式   | 文件后缀名 |
+| ---- | ----- |
+| JPEG | .jpg  |
+| PNG  | .png  |
+| GIF  | .gif  |
+| SVG  | .svg  |
+| WEBP | .webp |
+| BMP  | .bmp  |
+
+表2 音视频资源类型说明
+
+| 格式                                   | 支持的文件类型         |
+| ------------------------------------ | --------------- |
+| H.263                                | .3gp <br>.mp4   |
+| H.264 AVC <br> Baseline Profile (BP) | .3gp <br>.mp4   |
+| MPEG-4 SP                            | .3gp            |
+| VP8                                  | .webm <br> .mkv |
+
+## 创建资源文件
+
+在resources目录下，可按照限定词目录和资源组目录的说明创建子目录和目录内的文件。
+
+同时，DevEco Studio也提供了创建资源目录和资源文件的界面。
+
+- 创建资源目录及资源文件
+
+  在resources目录右键菜单选择“New > Resource File”，此时可同时创建目录和文件。
+
+  文件默认创建在base目录的对应资源组下。如果选择了限定词，则会按照命名规范自动生成限定词+资源组目录，并将文件创建在目录中。
+
+  目录名自动生成，格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。
+
+  ![create-resource-file-1](figures/create-resource-file-1.png)
+
+- 创建资源目录
+
+  在resources目录右键菜单选择“New > Resource Directory”，此时可创建资源目录。
+
+  选择资源组类型，设置限定词，创建后自动生成目录名称。目录名称格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。
+
+  ![create-resource-file-2](figures/create-resource-file-2.png)
+
+- 创建资源文件
+
+  在资源目录的右键菜单选择“New > XXX Resource File”，即可创建对应资源组目录的资源文件。
+
+  例如，在element目录下可新建Element Resource File。
+
+  ![create-resource-file-3](figures/create-resource-file-3.png)
\ No newline at end of file