html 悬浮水印 不完全适用

 

            <div id="water" style=" position: relative;">
                          <!-- 其它内容 -->
                           <canvas id="canvas"
                            style="position: absolute;   top: 0;  left: 0;z-index: 9999;  pointer-events: none; /* 禁止背景 Canvas 元素接收鼠标事件 */"></canvas>
                        </div>

 

 

    getWater() {
      var canvasContainer = document.getElementById('video');
      var water = document.getElementById('water');
      const canvas = document.getElementById("canvas");
      console.log(canvasContainer)
      canvas.width = 400;//设置画布宽度
      canvas.height = 240;//设置画布高度
      // canvas.style.display = "none";//隐藏画布本身
      const ctx = canvas.getContext("2d");//获取画笔
      ctx.font = "16px"; // 设置文字大小
      // ctx.fillStyle = "rgba(0,0,0,.3)";//设置文字颜色及透明度
      ctx.fillStyle = '#12ffaf'
      // ctx.rotate(-0.45);//设置文字旋转角度
      // 获取文本的宽度
      var text = '水印文本;
      var textWidth = ctx.measureText(text).width;
      var textHeight = 64;
      let countWidth = canvas.width / textWidth
      let countHeight = canvas.height / textHeight
      var textDate = formatDate1(new Date());
      for (let i = 0; i < countWidth; i++) {
        for (let m = 0; m < countHeight; m++) {
          ctx.fillText(text, textWidth * i + 10 * i, 64 * m + 20);//设置显示文字内容
          ctx.fillText(textDate, textWidth * i + 10 * i, 64 * (m - 1) + 16 + 20);//设置显示文字内容
        }
      }
      const img = canvas.toDataURL("image/png");//参数默认为 image/png,可以是其他image/jpeg等，该方法返回值是一个url，是base64组成的图片的源数据、可以直接赋值给图片的src属性
      const style = `background-image:url(${img});`;//定义样式
      water.setAttribute("style", style);//给要添加水印的元素设置样式
    }