canvas實現水印

最近遇到一個需求，給所有頁面加水印（登錄人），不影響其他點擊等功能的使用，目的是防止信息外漏，當時就在想：這年頭，PS就不說人人都能使用，誰手機還沒個塗鴉功能，防不了，但是就是這么個需求，那就實現吧！

具體實現思路：在頁面底部加一個大的div,給這個div添加背景圖，背景圖？從哪來？canvas實現吧！

function textBecomeImg(text,fontsize,fontcolor,target){
		var canvas = document.createElement('canvas');
		$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;
                canvas.width = 450;
		var context = canvas.getContext('2d');
		context.clearRect(0, 0, canvas.width*2, canvas.height);
		context.fillStyle = fontcolor;
		context.font=fontsize+"px Arial";
		context.textAlign = "center";
		context.textBaseline = 'middle'; 
		context.fillText(text,0,fontsize/2);
		var canvasWidth = canvas.width/99;
		canvasWidth = context.measureText(text).width;
		var dataUrl = canvas.toDataURL('image/png');
		var shuiyinDiv = document.createElement('div');
	   
	        var style = shuiyinDiv.style;
	        style.position = 'absolute';
	        style.left = 0;
	        style.top = '-10%';
	        style.width = '120%';
	        style.height = '100%';
	        style.opacity = '0.1';
	        style.background = "url("+dataUrl+")";
	        style.zIndex = 9999999991;
	        style.transform = "rotate(-30deg)";
	        style.pointerEvents = "none";
	        target.appendChild(shuiyinDiv);
	}