const showText = 'DEFAULT WATERMARK';

export default function addWaterMark(
  background = '#ffffff',
  font = '20px 黑体',
) {
  const cw = document.createElement('canvas');
  cw.id = 'watermark';
  cw.width = 160;
  cw.height = 100;
  const ctx = cw.getContext('2d'); // 返回一个用于在画布上绘图的环境
  ctx.clearRect(0, 0, 160, 100); // 绘制之前画布清除
  ctx.font = font;
  ctx.rotate(-20 * Math.PI / 180);
  ctx.fillStyle = 'rgba(100,100,100,0.1)';
  ctx.fillText(showText, -20, 80);
  ctx.rotate('20*Math.PI/180'); // 坐标系还原
  const img_src = cw.toDataURL();

  const antArr = document.getElementsByClassName('innerContent');
  for (let i = 0; i < antArr.length; i += 1) {
    document.getElementsByClassName('innerContent')[
      i
    ].style.background = `${background} url(${img_src})`;
  }
}

codepen =>>>>> codepen