中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
【本文正在参加2023年第一期优质创作者激励计划】 HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象(五)globalAlpha、lineDashOffset globalAlpha 代码
// xxx.ets @Entry @Component struct GlobalAlpha { 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.fillStyle = 'rgb(0,0,255)' this.context.fillRect(0, 0, 50, 50) this.context.globalAlpha = 0.4 this.context.fillStyle = 'rgb(0,0,255)' this.context.fillRect(50, 50, 50, 50) }) } .width('100%') .height('100%') } }
效果 lineDashOffset 代码
// xxx.ets @Entry @Component struct LineDashOffset { 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.arc(100, 75, 50, 0, 6.28) this.context.setLineDash([10,20]) this.context.lineDashOffset = 10.0 this.context.stroke() }) } .width('100%') .height('100%') } }
效果
微信扫码分享