H5 绘制水印

funcion setSy(domId, name) {
      let id = "1.23452384164.123412416";
      //创建一个画布
      let can = document.createElement("canvas");
      //设置画布的长宽
      can.width = 380;
      can.height = 340;

      let cans = can.getContext("2d");
      //旋转角度
      cans.rotate((-30 * Math.PI) / 180);
      cans.font = "24px Vedana";
      //设置填充绘画的颜色、渐变或者模式
      cans.fillStyle = "rgba(4, 55, 110, .8)";
      //设置文本内容的当前对齐方式
      cans.textAlign = "left";
      //设置在绘制文本时使用的当前文本基线
      cans.textBaseline = "Middle";
      //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
      cans.fillText(name, can.width / 8, can.height / 2);

      let div = document.createElement("div");
      div.id = id;
      div.style.pointerEvents = "none";
      div.style.top = "0";
      div.style.left = "0";
      div.style.bottom = "0";
      div.style.right = "0";
      div.style.position = "absolute";
      div.style.zIndex = "100000";
      // div.style.width = document.documentElement.clientWidth + 'px';
      // div.style.height = document.documentElement.clientHeight + 'px';
      div.style.background =
        "url(" + can.toDataURL("image/png") + ") left top repeat";

      document.getElementById(domId).appendChild(div);
    }

使用方法

//aaa为dom的id lalala为水印文本
setSy("aaa", "lalala");

移动端我一般这样写，自己找上门对应的部分改

cans.font = "16px Vedana";
//设置画布的长宽
can.width = 120;
can.height = 200;
cans.fillText(name, 45, 60);