js实现水印效果

// 方法
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;
},

// DOM加载之后调用
var text = `水印内容`;
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("+this.textBecomeImg(text,22,"gray")+")";
style.zIndex = 9999999991;
style.transform = "rotate(-30deg)";
style.pointerEvents = "none";
document.body.appendChild(shuiyinDiv);