HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象（十四）

createPattern

createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null

通过指定图像和重复方式创建图片填充的模板。

示例：

.// xxx.ets.@Entry.@Component.struct CreatePattern {.  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). .width('100%'). .height('100%'). .backgroundColor('#ffff00'). .onReady(() =>{.   var pattern = this.context.createPattern(this.img, 'repeat').   this.context.fillStyle = pattern.   this.context.fillRect(0, 0, 200, 200). }).    }.    .width('100%').    .height('100%').  }.}

bezierCurveTo

bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void

创建三次贝赛尔曲线的路径。

 示例：

.// xxx.ets.@Entry.@Component.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). .width('100%'). .height('100%'). .backgroundColor('#ffff00'). .onReady(() =>{.   this.context.beginPath().   this.context.moveTo(10, 10).   this.context.bezierCurveTo(20, 100, 200, 100, 200, 20).   this.context.stroke(). }).    }.    .width('100%').    .height('100%').  }