js实现全屏水印效果

使用canvas实现

通过canvas绘制生成base64背景图，使用repeat重复背景，达到充满整个元素的水印效果

function createWatermark(str, el = document.body) {
	 const width = 300;
	 const height = 240;
	 const canvas = Object.assign(document.createElement("canvas"), {
	   width,
	   height,
	 });
	
	 const ctx = canvas.getContext("2d");
	 if (ctx) {
	   ctx.rotate((Math.PI / 120) * -20);
	   ctx.font = "16px Microsoft Yahei";
	   ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
	   ctx.textAlign = "center";
	   ctx.textBaseline = "middle";
	   ctx.fillText(str, width / 10, height / 1.5);
	 }
	 const base64 = canvas.toDataURL("image/png");
	
	 el.style = `background:url(${base64}) left top repeat`;
	}
	
	createWatermark("Watermark Text");

效果图

解决层次遮住无法点击，可添加此css

pointer-events: none;

使用svg实现

function createWatermark(str, el = document.body) {
   let svgText= `
       <svg
           xmlns="http://www.w3.org/2000/svg"
           xmlnsXlink="http://www.w3.org/1999/xlink"
           width="300px"
           height="180px"
           viewBox="0 0 300 180"
       >
           <text
               x="-100"
               y="-30"
               fill="red"
               transform="rotate(-35 220 -220)"
               fillOpacity="0.3"
               fontSize="16"
           >
               ${str}
           </text>
       </svg>
   `;
   let url = URL.createObjectURL(
       new Blob([svgText], {
           type: "image/svg+xml",
       })
   );
   el.style = `background:url(${url}) left top repeat`;
}
createWatermark("Watermark Text");

效果图