HarmonyOS 如何给UI界面添加一个水印布局

@Entry  
@Component  
export struct MyComponent {  
  private settings: RenderingContextSettings = new RenderingContextSettings(true)  
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)  
  @Builder  
  Watermark() {  
    Canvas(this.context)  
      .width("100%")  
      .height("100%")  
      .hitTestBehavior(HitTestMode.Transparent)  
      .onReady(() => {  
        this.context.fillStyle = '#10000000'  
        this.context.font = "16vp"  
        this.context.textAlign = "center"  
        this.context.textBaseline = "middle"  
        // 在这里绘制文字水印，也可以是图片水印  
        for (let i = 0; i < this.context.width / 120; i++) {  
          this.context.translate(120, 0)  
          let j = 0  
          for (; j < this.context.height / 120; j++) {  
            this.context.rotate(-Math.PI / 180 * 30)  
            // 此处水印数据是定值，具体请替换为自己的水印  
            this.context.fillText("水印水印水印", -60, -60)  
            this.context.rotate(Math.PI / 180 * 30)  
            this.context.translate(0, 120)  
          }  
          this.context.translate(0, -120 * j)  
        }  
      })  
  }  
  
  build() {  
    Column() {  
      Text("没有数据哦").fontColor("#495057")  
      Image($r("app.media.startIcon")).width(300)  
    }  
    .layoutWeight(1)  
    .overlay(this.Watermark())  
    .width("100%")  
  }  
}