H5 页面加水印

1、先上个样式图

2、代码

//添加水印
	(function waterMark(){
		function textBecomeImg(text,fontsize,fontcolor){
			var canvas = document.createElement('canvas');
			 let buHeight = 0;
			if(fontsize <= 32){ buHeight = 99; }
			else if(fontsize > 32 && fontsize <= 60 ){ buHeight = 2;}
			else if(fontsize > 60 && fontsize <= 80 ){ buHeight = 4;}
			else if(fontsize > 80 && fontsize <= 100 ){ buHeight = 6;}
			else if(fontsize > 100 ){ buHeight = 10;}
			canvas.height=fontsize + buHeight ;
			canvas.padding=30;
			var context = canvas.getContext('2d');
			context.clearRect(0, 0, canvas.width*2, canvas.height);
			context.textAlign = "center";
	                canvas.width = 450;
	                canvas.height = 200;
	                context.fillStyle = fontcolor;
	                context.font=fontsize+"px Arial";
	                context.textBaseline = 'middle'; 
	                context.fillText(text,28,fontsize/2);
	                // var canvasWidth = canvas.width/99;
	                // canvasWidth = context.measureText(text).width;
			var dataUrl = canvas.toDataURL('image/png');
			return dataUrl;
		}
		var text = "谢凤 2021年10月";
		var shuiyinDiv = document.createElement('div');
		var style = shuiyinDiv.style;
		style.position = 'fixed';
		style.left = 0;
		style.top = '-60%';
		style.width = '120%';
		style.height = '200%';
		style.opacity = '0.1';
		style.background = "url("+textBecomeImg(text,22,"gray")+")";
		style.zIndex = 9999999991;
		style.transform = "rotate(-30deg)";
		style.pointerEvents = "none";
		document.body.appendChild(shuiyinDiv);
	})();