使用Canvas创建透明水印覆盖内容，通过JavaScript绘制文字或图片并叠加到目标区域，支持动态更新与响应式适配，有效标识来源且难以直接移除。
在HTML5中实现水印效果，主要通过 Canvas 元素绘制透明文字或图案，并将其作为叠加层覆盖在目标内容上。这种方式灵活、兼容性好，适合为图片、文档预览区域甚至视频添加动态水印。
1. 创建Canvas作为水印层
使用元素创建一个透明画布，设置其位置为绝对定位，覆盖在目标内容上方。通过JavaScript在画布上绘制文字或图像水印。
示例代码：
2. 叠加到目标区域（如图片或内容区）
若只为某个特定区域（如一个div或图片容器）添加水印，可将Canvas的尺寸和位置限制在该容器内。
立即学习“前端免费学习笔记（深入）”；
操作方法：
- 获取目标容器的位置和大小（getBoundingClientRect）
- 设置Canvas宽高与容器一致，并定位在其左上角
- 将Canvas插入容器内部或浮于其上
示例：为一个id为contentArea的div添加水印
const container = document.getElementById('contentArea');
const rect = container.getBoundingClientRect();
const canvas = document.createElement('canvas');
canvas.width = rect.width;
canvas.height = rect.height;
canvas.style.cssText = position: absolute; top: ${rect.top}px; left: ${rect.left}px; pointer-events: none; z-index: 999; opacity: 0.15; ;
document.body.appendChild(canvas);
// 在canvas上绘制水印（同上）
const ctx = canvas.getContext('2d');
ctx.font = 'bold 30px Arial';
ctx.fillStyle = 'gray';
ctx.rotate(-30 * Math.PI / 180);
ctx.fillText('内部资料', 50, 100);
3. 高级技巧：图片水印与动态更新
除了文字，还可以绘制图片作为水印（如公司Logo）。
使用drawImage()方法：
const img = new Image();
img.src = 'logo.png';
img.onload = function() {
ctx.drawImage(img, 0, 0, 50, 50); // 绘制小图标
}
也可以结合用户信息动态生成水印，例如：
createWatermark(`仅限 ${userName} 查看`);基本上就这些。Canvas水印轻量、难以删除（除非截图后编辑），适合前端防误传播。注意：它不能防止截图，但能明确标识来源。实际项目中可封装成函数或组件调用，灵活复用。不复杂但容易忽略细节，比如字体加载、坐标变换和响应式适配。
