JavaScript水印需动态创建透明覆盖层并多重防护：Canvas绘制防DOM删除，MutationObserver监听恢复，多实例+动态内容增强鲁棒性，调试干扰提升分析成本，本质是溯源威慑而非绝对安全。
JavaScript 实现水印效果，核心是动态创建带文字/图像的透明层并覆盖在页面内容上；防止被轻易移除，则需结合 DOM 监听、样式保护、多层冗余和运行时校验。单纯加一层 div 水印很容易被开发者工具删掉或用 CSS 隐藏，真正有效的水印需要“防君子也防小人”——至少提高篡改成本。
基础水印：Canvas 绘制 + 全局覆盖
比纯 CSS 或 img 标签更难删除，因为文字是绘制在 canvas 上的，不暴露为独立 DOM 节点：
- 创建一个全屏、固定定位、pointer-events: none 的 canvas 元素
- 用 ctx.rotate() 和 ctx.fillText() 绘制倾斜、半透明的文字（如“内部资料”+用户信息）
- 将 canvas 插入 body 最底层（z-index 设为 -1），避免遮挡交互
- 监听 window.resize 重新绘制，适配不同屏幕尺寸
防移除：DOM 变更监听 + 自动恢复
通过 MutationObserver 实时监控水印容器是否被删除或隐藏：
- 观察 document.body 子节点变化，一旦检测到水印元素消失，立即重建
- 同时监听水印元素的 style 属性（如 display、visibility、opacity），发现异常值就重置
- 可配合定时器兜底（例如每 2 秒检查一次水印是否可见）
- 注意：Observer 不会触发于内联样式修改，需搭配 getComputedStyle 判断最终渲染状态
增强防护：多实例 + 动态内容 + 混淆注入
单个水印易被定位清除，分散+动态化可提升鲁棒性：
立即学习“Java免费学习笔记（深入）”；
- 在页面多个区域（header、main、aside）分别插入不同 canvas 水印，文字内容微调（如加时间戳、用户 ID 哈希后缀）
- 水印文字不写死，从 localStorage 或后端接口异步获取（避免直接被字符串搜索定位）
- JS 文件名、函数名、变量名做轻量混淆（非加密），增加审查难度
- 关键逻辑不要集中在一个函数里，例如绘制、监听、恢复拆成不同闭包作用域
进阶限制：禁用开发者工具？不现实，但可干扰调试
无法真正禁用 DevTools，但能增加分析成本：
- 检测 console 是否被打开（通过监听 debugger 语句触发频率或覆盖 console.log）
- 在关键水印逻辑中插入无副作用的 debugger；频繁触发会让调试体验变差
- 对水印相关 DOM 设置不可见属性（如 font-size: 0; text-indent: -9999px），但 canvas 本身仍保持渲染
- 慎用 disable contextmenu 或禁用右键——影响用户体验且极易绕过
水印不是绝对安全的防线，而是内容溯源与行为威慑的组合策略。重点不在“完全防删”，而在“删了立刻露馅、改了马上失效、批量处理成本陡增”。实际项目中建议配合服务端水印（PDF/图片生成时嵌入）、访问权限控制、操作日志审计共同使用。
