使用overlay属性绘制 

思路：

• 定义了一个名为 Page 的组件结构体。
• 通过 @State 声明了一个状态变量 message 用于显示文本。
• 在 build 方法中创建了一个 RelativeContainer ，其中包含一个显示 message 的 Text 组件，并设置了其样式和对齐规则。
• 使用 overlay 方法叠加了一个自定义的水印 Watermark 。
• Watermark 是一个通过 @Builder 装饰的方法，内部使用 Canvas 组件来绘制水印文字。

代码解读：

• @State message: string = 'Hello World'; ：定义了一个可响应式的状态变量，其初始值为 'Hello World' ，当 message 的值发生变化时，组件会自动重新渲染。
• RenderingContextSettings 和 CanvasRenderingContext2D 的创建：用于设置和获取绘制上下文。
• 在 build 方法中，通过各种属性设置了 Text 组件的样式和对齐方式。
• Watermark 方法中，通过循环和坐标变换在 Canvas 上绘制了倾斜重复的水印文字。

注意事项：

• 对于状态管理，确保只在合适的时机修改 @State 变量的值，以触发正确的重新渲染。
• 在绘制水印时，要注意坐标计算和变换的准确性，以确保水印在整个画布上的分布和显示效果符合预期。
• 考虑性能优化，特别是在水印绘制的循环中，避免不必要的重复计算。
• 确保在实际应用中，正确处理可能的异常情况，比如获取绘制上下文失败等。

@Entry
@Component
struct Page {
  @State message: string = 'Hello World';
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private settings2: RenderingContextSettings = new RenderingContextSettings(true);
  private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings2);

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('PageHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .overlay(this.Watermark)
    .height('100%')
    .width('100%')
  }

  @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)
        }
      })
  }
}