!17228 【ace_engine_standard部件】Canvas支持绘制能力增强

Merge pull request !17228 from limeng/canvas_shader

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

@@ -1172,7 +1172,7 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
 | 参数       | 类型                                               | 必填 | 描述                                                         |
 | ---------- | -------------------------------------------------- | ---- | ------------------------------------------------------------ |
 | image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是   | 图源对象，具体参考ImageBitmap对象。                          |
-| repetition | string                                             | 是   | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp'repeat-y'、'no-repeat'。<br/>默认值：'' |
+| repetition | string                                             | 是   | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp'repeat-y'、'no-repeat'、'clamp'、'mirror'。<br/>默认值：'' |
 
 **返回值：**：
 
@@ -2574,7 +2574,53 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
 
   ![zh-cn_image_0000001239032419](figures/zh-cn_image_0000001239032419.png)
 
+### createConicGradient<sup>10+</sup>
+
+createConicGradient(startAngle: number, x: number, y: number): CanvasGradient
+
+创建一个圆锥渐变色。
+
+**参数：**
+
+| 参数       | 类型   | 必填 | 默认值 | 描述                                                         |
+| ---------- | ------ | ---- | ------ | ------------------------------------------------------------ |
+| startAngle | number | 是   | 0      | 开始渐变的角度，以弧度为单位。角度测量从中心右侧水平开始，顺时针移动。 |
+| x          | number | 是   | 0      | 圆锥渐变的中心x轴坐标。单位：vp                              |
+| y          | number | 是   | 0      | 圆锥渐变的中心y轴坐标。单位：vp                              |
+
+**示例：**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct CanvasExample {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffffff')
+        .onReady(() => {
+          var grad = this.context.createConicGradient(0, 50, 80)
+          grad.addColorStop(0.0, '#ff0000')
+          grad.addColorStop(0.5, '#ffffff')
+          grad.addColorStop(1.0, '#00ff00')
+          this.context.fillStyle = grad
+          this.context.fillRect(0, 30, 100, 100)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+  ![zh-cn_image_0000001239032419](figures/zh-cn_image_0000001239032420.png)
 
 ## CanvasPattern
 
-一个Object对象, 通过[createPattern](#createpattern)方法创建。
+一个Object对象, 通过[createPattern](#createpattern)方法创建。
\ No newline at end of file

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

@@ -1245,7 +1245,7 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
 | 参数         | 类型                                       | 必填   | 默认值  | 描述                                       |
 | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
 | image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是    | null | 图源对象，具体参考ImageBitmap对象。                  |
-| repetition | string                                   | 是    | “”   | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 |
+| repetition | string                                   | 是    | “”   | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'、'clamp'、'mirror'。 |
 
 **返回值：**
 
@@ -2725,6 +2725,56 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
 
   ![zh-cn_image_0000001238952407](figures/zh-cn_image_0000001238952407.png)
 
+### createConicGradient<sup>10+</sup>
+
+createConicGradient(startAngle: number, x: number, y: number): CanvasGradient
+
+创建一个圆锥渐变色。
+
+**参数：**
+
+| 参数       | 类型   | 必填 | 默认值 | 描述                                                         |
+| ---------- | ------ | ---- | ------ | ------------------------------------------------------------ |
+| startAngle | number | 是   | 0      | 开始渐变的角度，以弧度为单位。角度测量从中心右侧水平开始，顺时针移动。 |
+| x          | number | 是   | 0      | 圆锥渐变的中心x轴坐标。单位：vp                              |
+| y          | number | 是   | 0      | 圆锥渐变的中心y轴坐标。单位：vp                              |
+
+**示例：**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct OffscreenCanvasConicGradientPage {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffffff')
+        .onReady(() =>{
+          var grad = this.offContext.createConicGradient(0, 50, 80)
+          grad.addColorStop(0.0, '#ff0000')
+          grad.addColorStop(0.5, '#ffffff')
+          grad.addColorStop(1.0, '#00ff00')
+          this.offContext.fillStyle = grad
+          this.offContext.fillRect(0, 30, 100, 100)
+          var image = this.offContext.transferToImageBitmap()
+          this.context.transferFromImageBitmap(image)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+  ![zh-cn_image_0000001239032419](figures/zh-cn_image_0000001239032420.png)
 
 ## CanvasPattern