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>