真正有效的视频水印必须用Canvas实时绘制到每一帧像素中，而非CSS叠加；需同步尺寸、每帧清空重绘、文字后置绘制并控制透明度，配合右下角锚定、正确字体与基线设置，以及requestAnimationFrame驱动和节流优化。
真正在视频画面上叠加水印，不是“盖一层div”，而是把文字实时画进每一帧像素里。Canvas 是唯一能稳定生效的前端方案——截图、录屏、全屏播放时水印都还在。
必须用 canvas 实时绘制，不能靠 CSS 叠层
把 上方，只是视觉错觉：视频原生播放器会遮挡它；移动端全屏时布局重排，水印直接消失；用户右键保存或截图，得到的是纯视频帧，根本不含叠加内容。真正起作用的水印，必须由 canvas 每帧捕获视频画面，再手动把文字/图形 draw 到同一图层上。
核心步骤：同步尺寸 + 每帧重绘 + 清空画布
缺一不可：
- canvas 宽高必须动态设为
video.clientWidth和video.clientHeight，不是原始分辨率（video.videoWidth），否则缩放后水印位置偏移 - 每次绘制前必须调用
ctx.clearRect(0, 0, canvas.width, canvas.height)，否则上一帧残留，出现拖影 - 文字必须在
drawImage()之后立即绘制，且每次都要调用fillText()，不能只画一次 - 透明度用
ctx.globalAlpha = 0.3控制，别用 CSS 的opacity，那会让整个 canvas 变淡
文字定位与样式关键细节
避免常见错位：
- 右下角锚定最稳：用
canvas.width - 20和canvas.height - 20作坐标，旋转或横竖屏切换也不易跑出画布 -
textBaseline = 'bottom'+textAlign = 'right'配合右下角坐标，文字边缘对齐精准 - 字体必须显式声明，例如
ctx.font = 'bold 24px sans-serif'，不写大小会回退到极小默认值 - 如需斜向平铺，先
ctx.save()→ctx.translate()→ctx.rotate()→ 绘制 →ctx.restore()，避免坐标系永久歪斜
性能与兼容性要点
让水印既稳定又不卡顿：
- 用
requestAnimationFrame驱动绘制，比setInterval更准、更省资源 - 加节流逻辑：文字内容不变时，300ms 内跳过重复
fillText，减少 CPU 开销 - iOS Safari 对
textBaseline = 'alphabetic'渲染偏高，统一设为'bottom'或'middle'更可靠 - 监听
resize事件及时同步 canvas 尺寸，尤其适配横竖屏切换
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
