实现全局水印鸿蒙示例代码

Canvas(this.context)
  .width('100%')
  .height('100%')
  .hitTestBehavior(HitTestMode.Transparent)
  .onReady(() => {
    // TODO:知识点:通过canvas绘制水印
    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);
    }
  })
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

RelativeContainer() {
  Text(this.message)
    .id('HelloWorld')
    .fontSize(50)
    .fontWeight(FontWeight.Bold)
    .alignRules({
      center: { anchor: '__container__', align: VerticalAlign.Center },
      middle: { anchor: '__container__', align: HorizontalAlign.Center }
    })
}
.overlay(createWaterMarkView())  // 水印效果，只需要在组件加上默认属性overlay即可
// 每一个页面都加上，即可实现全局水印

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.