JS原生水印，亲测有效，到哪都有效

话不多说直接上代码

(function createCanvas() {
        var width = 100;
        var height = 100;
        var x = 10;
        var y = 10;
        var rotate = 30;
        var fontSize = 16;
        var alpha = 0.6; //透明度
        var color = '#';
        var canvas = document.createElement('canvas');
        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);

        var ctx = canvas.getContext('2d');

        ctx.textAlign = 'top'; // 在绘制文本时使用的当前文本基线
        ctx.textBaseline = 'left'; // 设置或返回文本内容的当前对齐方式
        ctx.font = `${fontSize}px Arial`; // ctx.font = '24px Arial';
        ctx.fillStyle = color;
        ctx.globalAlpha = alpha; // 设置或返回绘图的当前 alpha 或透明值
        ctx.rotate((Math.PI / 180) * rotate); //将画布旋转30度
        ctx.fillText('kakarotte', parseFloat(width) / 2, parseFloat(height) / 2); // 从cookie里获取userName
        // kakarotte，这是我的名字，你要用的话就修改成你的，或者用形参传值进来，每个界面可以不一样
        
        var base64Url = canvas.toDataURL();

        var wm = document.getElementById('waterMark');

        var watermarkDiv = wm || document.createElement('div');
        var styleStr = `
         position:fixed;
         top:0;
         left:0;
         bottom:0;
         right:0;
         z-index:${9999};
         pointer-events:none;
         background-repeat:repeat;
         background-image:url('${base64Url}')`;

        watermarkDiv.setAttribute('style', styleStr);
        watermarkDiv.id = 'waterMark';

        var bodyContainer = document.body;

        if (!wm) {
          bodyContainer.appendChild(watermarkDiv);
        }

        const MutationObserver =
          window.MutationObserver ||
          window.WebKitMutationObserver ||
          window.MozMutationObserver; // 检测浏览器是否支持该特性
        if (MutationObserver) {
          var observer = new MutationObserver(function () {
            var wm = document.getElementById('waterMark');
            // 只在wm元素样式被修改或者元素被移除时
            if ((wm && wm.getAttribute('style') !== styleStr) || !wm) {
              // 避免一直触发
              observer.disconnect(); //解除监听
              observer = null;
              createCanvas();
            }
          });

          observer.observe(bodyContainer, {
            // 监听body元素子元素的变化
            attributes: true,
            subtree: true,
            childList: true,
          });
        }

        var styleEl = document.createElement('style');
        styleEl.setAttribute('type', 'text/css');
        document.head.appendChild(styleEl);
      })();