quadraticCurveTo
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坐标值。 |
示例:
@Entry
@Component
struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.beginPath()
this.context.moveTo(20, 20)
this.context.quadraticCurveTo(100, 100, 200, 20)
this.context.stroke()
})
}
.width('100%')
.height('100%')
}
}
arc
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
绘制弧线路径。
参数:
参数 |
类型 |
必填 |
默认值 |
描述 |
---|
x |
number |
是 |
0 |
弧线圆心的x坐标值。 |
y |
number |
是 |
0 |
弧线圆心的y坐标值。 |
radius |
number |
是 |
0 |
弧线的圆半径。 |
startAngle |
number |
是 |
0 |
弧线的起始弧度。 |
endAngle |
number |
是 |
0 |
弧线的终止弧度。 |
counterclockwise |
boolean |
否 |
false |
是否逆时针绘制圆弧。 |
示例:
@Entry
@Component
struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.beginPath()
this.context.arc(100, 75, 50, 0, 6.28)
this.context.stroke()
})
}
.width('100%')
.height('100%')
}
}
*附件:HarmonyOSOpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象(十五)quadraticCurveTo arc.docx
|