Canvas文字水印实现分三步：先创建canvas并用ctx.rotate、fillText等绘制倾斜半透明文字；再转base64图片；最后设为body背景或fixed图层，配合pointer-events: none和MutationObserver增强防护。
用 Canvas 添加文字水印，核心是“画出来 → 转成图 → 贴上去”。不依赖第三方库，纯原生 JS 就能实现，关键是控制好透明度、角度和铺满逻辑。
创建 canvas 并绘制文字
先动态创建一个 canvas 元素，设置宽高（比如 300×200），获取 2D 上下文后配置样式：
- 用 ctx.font 设字体大小和字体族，例如
'18px Microsoft Yahei' - 用 ctx.fillStyle 设颜色，推荐半透明灰：
'rgba(150, 150, 150, 0.2)' - 用 ctx.textAlign 和 ctx.textBaseline 对齐到中心，方便居中定位
- 用 ctx.rotate() 倾斜文字（单位是弧度），比如
Math.PI / 6表示 30° - 最后调 ctx.fillText(text, x, y) 把文字画在画布上
转成 base64 图片并设为背景
绘制完成后，调 canvas.toDataURL('image/png') 得到 base64 字符串。这个字符串可直接当图片 URL 用：
- 作为 body 背景：
document.body.style.backgroundImage = `url(${base64Url})` - 记得加
background-repeat: repeat，让水印平铺全页 - 若担心遮挡内容，可改用固定定位的 div 图层替代背景方式
用固定图层覆盖，确保不影响交互
更推荐的方式是插入一个 position: fixed 的 div，把水印图设为其背景：
立即学习“Java免费学习笔记（深入）”；
- 设置 pointer-events: none，用户点击能穿透到下层页面
- 宽高设为
100vw和100vh，覆盖整个视口 - z-index 调高（如 9999），保证始终在最上层
- 背景用
url(...) repeat，避免单块水印太稀疏
防篡改小技巧（可选）
如果水印用于敏感内容保护，可配合 MutationObserver 监听该水印 div 是否被删除或样式被修改：
- 一旦发现 DOM 变动，自动重建水印层
- 注意只监听目标节点及其子树，避免性能开销
- 不是绝对防截图，但能提高手动清除水印的门槛
