通过Canvas和JavaScript可在HTML5中实现水印功能，首先创建canvas绘制文字并转为base64图像，再将其设为页面背景或固定定位的透明图层，覆盖全屏且不影响交互，常用于提示和防泄漏。
在HTML5中实现水印功能，主要是通过Canvas绘制文字或图片，并将其作为背景或叠加层显示在页面内容上。虽然HTML5本身没有直接提供“添加水印”的标签或API，但结合JavaScript和Canvas可以轻松实现这一效果。
使用Canvas绘制文字水印
最常见的方式是利用canvas绘制透明的文字水印并插入到页面中。
步骤如下：
- 创建一个canvas元素
- 设置画布的字体、颜色和透明度
- 用fillText方法绘制文字
- 将生成的base64图像设为某个容器的背景
示例代码：
立即学习“前端免费学习笔记（深入）”；
动态添加水印层覆盖页面
如果需要更明显的水印（如防止截图），可以通过JavaScript创建一个带水印的透明图层，覆盖在页面内容上方。
- 生成水印图像（同上）
- 创建一个div，设置其position: fixed
- 将水印图设为背景，并铺满整个视口
- 设置pointer-events: none，确保不影响用户操作
示例：
注意事项与限制
前端水印主要用于视觉提示，不能完全防止信息泄露。
- 用户可通过禁用JavaScript或审查元素移除水印
- 截图或录屏仍可能绕过防护
- 如需更高安全性，应在服务端生成带水印的图片或PDF
- 可结合用户信息动态生成个性化水印（如用户名、IP）增强追踪能力
基本上就这些。用Canvas加一点JS，就能在网页中实现实用的水印功能。不复杂但容易忽略细节，比如透明度、旋转角度和重复布局。调好样式后，能有效起到提醒和防泄漏的作用。
