提交 1bb8d272 编写于 作者: L limeng

modify the api version , image and source code

Signed-off-by: Nlimeng <limeng208@huawei.com>
上级 47e717a0
......@@ -2574,7 +2574,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
![zh-cn_image_0000001239032419](figures/zh-cn_image_0000001239032419.png)
### createConicGradient
### createConicGradient<sup>10+</sup>
createConicGradient(startAngle: number, x: number, y: number): CanvasGradient
......@@ -2585,8 +2585,8 @@ createConicGradient(startAngle: number, x: number, y: number): CanvasGradient
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ------ | ------------------------------------------------------------ |
| startAngle | number | 是 | 0 | 开始渐变的角度,以弧度为单位。角度测量从中心右侧水平开始,顺时针移动。 |
| x | number | 是 | 0 | 圆锥渐变的中心x轴坐标。 |
| y | number | 是 | 0 | 圆锥渐变的中心y轴坐标。 |
| x | number | 是 | 0 | 圆锥渐变的中心x轴坐标。单位:vp |
| y | number | 是 | 0 | 圆锥渐变的中心y轴坐标。单位:vp |
**示例:**
......@@ -2603,7 +2603,7 @@ struct CanvasExample {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#696969')
.backgroundColor('#ffffff')
.onReady(() => {
var grad = this.context.createConicGradient(0, 50, 80)
grad.addColorStop(0.0, '#ff0000')
......@@ -2623,4 +2623,4 @@ struct CanvasExample {
## CanvasPattern
一个Object对象, 通过[createPattern](#createpattern)方法创建。
一个Object对象, 通过[createPattern](#createpattern)方法创建。
\ No newline at end of file
......@@ -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'、&nbsp;'repeat-y'、'no-repeat'。 |
| repetition | string | 是 | “” | 设置图像重复的方式,取值为:'repeat'、'repeat-x'、&nbsp;'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
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册