網上瀏覽的時候。看到有些頁面會有背景的水印效果，使用canvas實現了個類似的效果，如圖

可以作為背景，也可以作為頁面前景覆蓋，防止網頁資訊的截圖

實現程式碼

let canvas = document.createElement('canvas')
canvas.id = '__canvas'
canvas.width = '180' // 每個水印的寬高
canvas.height = '150'
let ctx = canvas.getContext('2d')
ctx.fillStyle = 'rgba(150, 150, 150, 0.5)'
ctx.rotate((25 * Math.PI) / 180) // 偏轉的角度
ctx.fillText('originDu, 30, 20)  // 繪製文字 繪製開始位置

let src = canvas.toDataURL('image/png')

// 水印容器
let waterMaskdiv
 
 = document.createElement('div')

waterMaskDiv.style.position = 'fixed'
waterMaskDiv.style.zIndex = '-1'
waterMaskDiv.id = '__water-mark'
waterMaskDiv.style.top = '0'
waterMaskDiv.style.left = '0'
waterMaskDiv.style.height = '100%'
waterMaskDiv.style.width = '100%'
waterMaskDiv.style.pointerEvents = 'none'
waterMaskDiv.style.backgroundImage = 'URL(' + src + ')'
// 水印節點插到body下 可以通過層級控制節點層次
document.body.appendChild(waterMaskDiv)
 

廣州品牌設計公司https://www.houdianzi.com

如果是要起到截圖水印的效果，那就要防止使用者使用開發者工具之類的刪除或者修改節點的樣式去除水印，這時候可以用到 MutationObserver 建構函式，他可以建立並返回一個新的 MutationObserver 它會在指定的DOM發生變化時被呼叫

// 禁止修改水印節點
let targetNode = document.querySelector('#__water-mark')
let config = {
	childList: true,
	attributes: true,
	characterData: true,
	subtree: true,
	attributeOldValue: true,
	characterDataOldValue: true
}

const
 
 mutationCallback = mutationList => {
  for (let mutation of mutationList) {
    let type = mutation.type
    switch (type) {
      case 'childList':
        console.log('節點被刪除或新增')
        break
	  case 'attributes':
		console.log(`${mutation.attributeName}屬性修改了`)
        break
      case 'subtree':
        console.log('子樹被修改')
		break
	  default:
		break
    }
  }
}

// 建立 MutationObserver 例項
let observer = new MutationObserver(mutationCallback)

// 開始監控目標節點
observer.observe(document.body, config)

// 停止監控
// observer.disconnect()

在檢測到修改的時候，可以對比被修改的元素的ID，如果是水印的ID，這時候可以刪除水印div後重新執行第一步的插入操作，以達到避免水印被修改的目的