真视频贴纸必须用canvas逐帧绘制而非css覆盖——需动态同步canvas尺寸、清空画布、预加载贴纸图像，并用ctx.save/translate/rotate/scale/drawimage控制变换，多贴纸需按时间轴筛选并插值动画。
真视频贴纸不是“盖一层div”就能完事的——它必须随视频帧实时更新位置、缩放和旋转，否则全屏、截图、录屏时贴纸直接消失。核心矛盾在于：DOM 层叠元素（img、div）和视频画面不在同一渲染图层，浏览器不会把它们合成一帧。
为什么用 CSS transform 叠 div 做贴纸会失效
常见做法是给一个 div 设 position: absolute + transform: scale(0.8) rotate(15deg) 盖在 video 上。这在普通页面浏览时“看起来”像贴纸，但：
- 全屏播放时，原生播放器 UI 会接管视口，你的
div被移出或遮挡 - 用户用系统截图工具（如 macOS Shift+Cmd+4）截的是视频解码帧，不是网页 DOM 布局
- 移动端 Safari 对
video全屏有强制重排逻辑，transform基准错乱，贴纸飘到左上角甚至画布外 -
pointer-events: none只能让点击穿透，解决不了内容不可见的本质问题
canvas 绘制贴纸的最小必要步骤
必须监听 video 播放状态，每帧将当前画面 draw 到 canvas，再在同一 canvas 上绘制贴纸图像。关键动作缺一不可：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- canvas 尺寸必须动态同步 video 的显示尺寸：
canvas.width = video.clientWidth；canvas.height = video.clientHeight（不是video.videoWidth） - 每次
drawImage()前必须调用ctx.clearRect(0, 0, canvas.width, canvas.height)，否则上一帧残留 - 贴纸图像需提前用
new Image()加载并缓存，避免每帧重复创建；加载完成后再开始绘制循环 - 贴纸位置/缩放/旋转要用 canvas 原生 API 控制：
ctx.save()→ctx.translate()→ctx.rotate()→ctx.scale()→ctx.drawImage(img, ...)→ctx.restore() - 透明度用
ctx.globalAlpha = 0.7，别用img.style.opacity—— 那是控制整个 canvas 元素，不是单个贴纸
如何支持多贴纸 + 时间轴控制
贴纸不是静态的，它通常有生效时间、持续时长、入场动画等。不能靠 JS 定时器硬控，要绑定到视频时间轴：
- 把贴纸定义为数组，每个对象含
startTime、duration、position、scale、rotation、image等字段 - 在绘制函数中遍历数组，只对
video.currentTime落在[startTime, startTime + duration]内的贴纸执行drawImage() - 入场动画（如淡入、缩放进入）用插值计算：
const progress = Math.min(1, (video.currentTime - startTime) / 0.3)，再映射到globalAlpha或scale - 避免每帧都遍历全部贴纸：可对数组按
startTime排序，用二分查找快速定位当前活跃区间
canvas 贴纸真正的难点不在“画出来”，而在“不掉帧、不错位、不卡顿”。一旦视频分辨率高或贴纸数量多，requestAnimationFrame 回调里做太多计算就会丢帧——这时候得考虑 Web Worker 预计算变换矩阵，或用 OffscreenCanvas 分离绘制线程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
