结论：css水印更轻量、兼容性好，但防截屏能力弱；canvas水印能覆盖滚动区域、动态生成，但性能稍差、ios可能被系统截图绕过。
uni-app 页面水印用 canvas 还是 CSS？
直接说结论：CSS 水印更轻量、兼容性好，但防截屏能力弱；canvas 水印能覆盖滚动区域、动态生成，但性能稍差、iOS 上可能被系统截图绕过。真实项目里，90% 的“防截屏”需求其实只是防误传，用 CSS 就够了——别一上来就写 canvas。
常见错误现象：background-image 水印在 iOS 微信里不显示、水印文字被页面内容遮挡、下拉刷新后水印错位。
- 使用场景优先选 CSS：登录页、订单详情页、内部审批页这类静态或半静态页面
-
canvas适合需要动态拼接用户信息（如「张三-20240520」）或水印必须随滚动始终可见的场景 - 注意 uni-app 的
page层级渲染顺序：CSS 水印要挂载在<page></page>根节点上，不能只加在某个<view></view>内
uni-app 全局水印 CSS 实现要点
不是简单加个 background，关键在「覆盖全屏 + 不干扰交互 + 适配多端」。
常见错误现象：水印只盖住内容区、安卓正常 iOS 白屏、水印文字模糊、微信开发者工具里正常真机失效。
- 用
::before伪元素实现，避免额外 DOM 节点影响布局和生命周期 - 必须设置
position: fixed和z-index: 9999，且父容器不能有overflow: hidden - 字体大小用
vw单位（比如font-size: 6vw），比rem更稳，避免 iPhone 小屏文字过小 - 透明度控制在
opacity: 0.08左右，太浅看不见，太深影响阅读 - 微信小程序端需额外加
-webkit-transform: rotate(-12deg)，否则旋转水印会锯齿
uni-app 中 canvas 水印为什么经常“不生效”？
不是代码写错了，而是生命周期和渲染时机没对上。canvas 水印必须等页面真正渲染完成、尺寸确定后再绘制，否则画布为空或尺寸为 0。
常见错误现象：onLoad 里直接 draw 报错、水印只出现在首屏、切换 tab 后水印消失、H5 端正常小程序白屏。
- 不要在
onLoad或onShow里立即调用uni.createCanvasContext，改用$nextTick或setTimeout(..., 0) - 监听
resize事件重绘（尤其分屏/横竖屏切换），小程序端用uni.onWindowResize - H5 和小程序 canvas API 参数不同：H5 用
getContext('2d')，小程序用uni.createCanvasContext('id', this)，ID 必须唯一且在模板中声明 - 避免高频重绘：水印内容不变时，缓存 canvas 图片 base64，用
drawImage复用
uni-app 防截屏水印的现实边界在哪？
得说清楚：没有绝对防截屏的前端方案。所谓“防”，只是提高截图成本和降低传播意愿。
容易被忽略的地方：
- Android 截图可绕过所有 web 层水印（系统级截图直接捕获 framebuffer）
- iOS 录屏+OCR 能轻易提取水印文字，动态时间戳意义有限
- 微信小程序真机调试时开启「调试模式」，水印会被自动隐藏（这是平台限制，无法绕过）
- 如果页面用了
cover-view或video组件，CSS 水印会被遮挡，必须用 canvas 叠加在同层渲染器上
复杂点在于：你得先想清楚水印到底防谁——防同事随手转发？还是防恶意批量抓取？前者 CSS 足够，后者得配合服务端签名、动态 token、截图检测等后端手段。前端水印只是第一道视线屏障，不是锁。
