uniapp小程序實現水印

<template>
	<view class="content">
		<view class='water_top'>
			<canvas canvas-id='myCanvas' style='width:100%;height:100%'></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.drowsyUserinfo()
		},
		methods: {
			drowsyUserinfo() {
				var name_xx = '小二';
				var ctx = wx.createCanvasContext("myCanvas1");
			
				ctx.rotate(45 * Math.PI / 180); //設置文字的旋轉角度，角度爲45°；
			
				//對斜對角線以左部分進行文字的填充
				for (let j = 1; j < 10; j++) { //用for循環達到重複輸出文字的效果，這個for循環代表縱向循環
					ctx.beginPath();
					ctx.setFontSize(20);
					ctx.setFillStyle("rgba(169,169,169,.2)");
			
					ctx.fillText(name_xx, 0, 50 * j);
					for (let i = 1; i < 10; i++) { //這個for循環代表橫向循環，
						ctx.beginPath();
						ctx.setFontSize(20);
						ctx.setFillStyle("rgba(169,169,169,.2)");
						ctx.fillText(name_xx, 80 * i, 50 * j);
					}
				} //兩個for循環的配合，使得文字充滿斜對角線的左下部分
			
				//對斜對角線以右部分進行文字的填充邏輯同上
				for (let j = 0; j < 10; j++) {
					ctx.beginPath();
					ctx.setFontSize(20);
					ctx.setFillStyle("rgba(169,169,169,.2)");
			
					ctx.fillText(name_xx, 0, -50 * j);
					for (let i = 1; i < 10; i++) {
						ctx.beginPath();
						ctx.setFontSize(20);
						ctx.setFillStyle("rgba(169,169,169,.2)");
						ctx.fillText(name_xx, 80 * i, -50 * j);
					}
				}
				ctx.draw();
			},
					
		}
	}
</script>

<style>
	.water_top {
	  position: fixed;
	  z-index: 1;
	  opacity: 0.9;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	}
</style>