[文章]HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象

shadowColor
代码

// xxx.ets

@Entry

@Component

struct ShadowColor {

  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.shadowBlur = 30

          this.context.shadowColor = 'rgb(0,0,255)'

          this.context.fillStyle = 'rgb(255,0,0)'

          this.context.fillRect(30, 30, 100, 100)

      })

    }

    .width('100%')

    .height('100%')

  }

}

效果

shadowOffsetX

代码

// xxx.ets

@Entry

@Component

struct ShadowOffsetX {

  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.shadowBlur = 10

          this.context.shadowOffsetX = 20

          this.context.shadowColor = 'rgb(0,0,0)'

          this.context.fillStyle = 'rgb(255,0,0)'

          this.context.fillRect(20, 20, 100, 80)

      })

    }

    .width('100%')

    .height('100%')

  }

}

效果