参考demo:@Entry @Component struct PageWatermark { 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%") } .height('100%') .width('100%') } }
参考demo: