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

不能说的秘密

shadowColor
代码

1. // xxx.ets
   
2. @Entry
   
3. @Component
   
4. struct ShadowColor {
   
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.shadowBlur = 30
    
16.           this.context.shadowColor = 'rgb(0,0,255)'
    
17.           this.context.fillStyle = 'rgb(255,0,0)'
    
18.           this.context.fillRect(30, 30, 100, 100)
    
19.       })
    
20.     }
    
21.     .width('100%')
    
22.     .height('100%')
    
23.   }
    
24. }
    

复制代码

效果


shadowOffsetX
代码

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

复制代码

效果