鸿蒙HarmonyOS/OpenHarmony应用开发-ArkTS画布组件（五）

不能说的秘密

globalAlpha
代码

1. // xxx.ets
   
2. @Entry
   
3. @Component
   
4. struct GlobalAlpha {
   
5.   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   
6.   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
7.   
   
8.   build() {
   
9.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
   
10.       Canvas(this.context)
    
11.         .width('100%')
    
12.         .height('100%')
    
13.         .backgroundColor('#ffff00')
    
14.         .onReady(() =>{
    
15.         this.context.fillStyle = 'rgb(0,0,255)'
    
16.         this.context.fillRect(0, 0, 50, 50)
    
17.         this.context.globalAlpha = 0.4
    
18.         this.context.fillStyle = 'rgb(0,0,255)'
    
19.         this.context.fillRect(50, 50, 50, 50)
    
20.       })
    
21.     }
    
22.     .width('100%')
    
23.     .height('100%')
    
24.   }
    
25. }

复制代码

效果

效果

lineDashOffset
代码

1. // xxx.ets
   
2. @Entry
   
3. @Component
   
4. struct LineDashOffset {
   
5.   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   
6.   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
7.   
   
8.   build() {
   
9.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
   
10.       Canvas(this.context)
    
11.         .width('100%')
    
12.         .height('100%')
    
13.         .backgroundColor('#ffff00')
    
14.         .onReady(() =>{
    
15.           this.context.arc(100, 75, 50, 0, 6.28)
    
16.           this.context.setLineDash([10,20])
    
17.           this.context.lineDashOffset = 10.0
    
18.           this.context.stroke()
    
19.       })
    
20.     }
    
21.     .width('100%')
    
22.     .height('100%')
    
23.   }
    
24. }

复制代码

效果