页面加水印

// 绘制canvas水印
function setWatermark (str, domid, params) {
  var { width, height, angle, opacity, fontSize } = params || {}
  var dom = ""
  if (domid) {
    dom = document.getElementById(domid)
  } else {
    dom = document.body
  }
  // 固定id便于去重和移除
  var id = "jyWatermarkCanvasContainer"
  if (document.getElementById(id) !== null) {
    dom.removeChild(document.getElementById(id))
  }

  var can = document.createElement("canvas")
  can.width = width || 350
  can.height = height || 260

  var cans = can.getContext("2d")
  cans.rotate((-(angle || 20) * Math.PI) / 180)
  cans.font = `${fontSize || "20px"} Vedana`
  cans.fillStyle = `rgba(200, 200, 200, ${opacity || 0.2})`
  cans.textAlign = "left"
  cans.textBaseline = "Middle"
  cans.fillText(str, can.width / 3, can.height / 2)

  var div = document.createElement("div")
  div.id = id
  div.style.pointerEvents = "none"
  div.style.top = "70px"
  div.style.left = "0px"
  div.style.position = "fixed"
  div.style.zIndex = "100000"
  div.style.width = document.documentElement.clientWidth - 100 + "px"
  div.style.height = document.documentElement.clientHeight - 100 + "px"
  div.style.background =
    "url(" + can.toDataURL("image/png") + ") left top repeat"
  dom.appendChild(div)
  return id
}
// 水印移除
function removeWatermark () {
  var id = "jyWatermarkCanvasContainer"
  if (document.getElementById(id) !== null) {
    document.getElementById(id).remove()
  }
}
// 添加水印
function addWatermark (str, domid, params) {
  setWatermark(str, domid, params)
  // var id = setWatermark(str, domid, params)
  // 定时添加水印防删除
  // setInterval(() => {
  //   if (document.getElementById(id) === null) {
  //     id = setWatermark(str, domid, params)
  //   }
  // }, 500)
  // 窗口移动重新绘制
  // window.onresize = () => {
  //   setWatermark(str, domid)
  // }
}