uni-app中扫描线卡顿主因是canvas频繁全量重绘及native桥接阻塞，应改用局部擦除+重绘、setInterval控帧、关闭debug，并优先采用CSS方案替代canvas。
uni-app 里用 canvas 实现扫描线动画为什么总卡顿？
因为默认用 requestAnimationFrame 配合 clearRect + fillRect 重绘，但在真机（尤其低端安卓）上 canvas 渲染帧率不稳，加上 uni-app 的 canvas 是通过 native 层桥接的，频繁 draw 会触发同步阻塞。
- 别用每帧清空整个 canvas 再画线——改用「只擦除上一帧扫描线位置 + 重绘新位置」，减少绘制面积
- 扫描线高度固定为
2px，颜色用半透明白色：rgba(255, 255, 255, 0.8)，避免 alpha 混合开销 - 动画节奏交给
setInterval（间隔40ms≈ 25fps），比requestAnimationFrame在 uni-app 里更可控 - 真机调试时关掉
debug模式，否则console.log会拖慢定时器
uni-app 的 uni.createCanvasContext 怎么画出平滑下移的扫描线？
关键不是“动”，而是“看起来在动”：靠定时更新 y 坐标，在 canvas 上反复绘制同一根线，利用人眼视觉暂留形成下移动效。不能靠 transform 或 translate，那在 canvas 里不生效。
- 初始化时用
uni.createCanvasContext('scan-canvas', this)，注意第二个参数必须传this（vue 实例上下文） - canvas 宽高要和外层 view 严格一致，用
uni.upx2px转换 rpx，避免缩放失真 - 每次绘制前不用
clearRect全清，只用fillRect(x, lastY, width, 2)把上一帧位置涂成背景色（如透明黑） - 示例片段：
const ctx = uni.createCanvasContext('scan-canvas', this)<br>ctx.setFillStyle('rgba(0, 0, 0, 0.01)') // 极淡底色，覆盖旧线<br>ctx.fillRect(0, this.lastY, this.canvasWidth, 2)<br>ctx.setFillStyle('rgba(255, 255, 255, 0.8)')<br>ctx.fillRect(0, this.currentY, this.canvasWidth, 2)<br>ctx.draw()
扫码框区域怎么和扫描线对齐，又不被 cover-view 遮住？
uni-app 的 camera 组件必须用 cover-view 叠加 UI，但它层级虽高，却无法嵌套 canvas —— 所以扫描线 canvas 必须用 cover-image 或原生渲染方案，但更稳的做法是：把 canvas 放进 cover-view 内部，并设 position: absolute 精确控制坐标。
-
cover-view里只能放cover-image、cover-view、button，**canvas 不被支持** → 必须用cover-image+ 动态生成 base64 图片（太重）或改用「纯 CSS 扫描线」 - 推荐方案：放弃 canvas，用一个
view做扫描线，设height: 2px、background: linear-gradient(...)，再用animation下移 —— 这样完全走 CSS 渲染管线，性能好、兼容强 - 如果坚持 canvas，得把整个扫码页设为
camera+cover-view包裹的结构，canvas 放在cover-view里，且z-index设为最高（999），否则在某些安卓机上会被 camera 遮掉 - 务必监听
uni.onWindowResize，窗口尺寸变（比如横竖屏切换）时重新计算 canvas 坐标
微信/支付宝小程序里能跑的扫描线代码，为什么 uni-app 编译后不动？
因为 uni-app 编译到不同平台时，canvas API 行为不一致：微信用 wx.createCanvasContext，支付宝用 my.createCanvasContext，而 uni-app 的 uni.createCanvasContext 在 H5 和 App 端其实是降级为 2D canvas DOM API，但真机上仍走 native 桥，导致 timing 或坐标系偏差。
- 别依赖
canvas.width/canvas.height获取尺寸，它们在真机上可能返回 0 → 改用uni.getSystemInfo拿屏幕宽高，再按比例算 canvas 区域 - H5 端 canvas 是真实 DOM 元素，可用
getContext('2d')；App 和小程序端必须用uni.createCanvasContext，二者不可混用 - 支付宝小程序要求 canvas 必须设置
type="2d"属性，uni-app 模板里没自动加 → 在template中显式写：<canvas canvas-id="scan-canvas" type="2d"></canvas> - 测试时优先跑「App 端」而非「模拟器」，很多 canvas 动画问题只在真机暴露
扫描线本身不难，难的是它必须在 camera 画面之上、不遮挡识别区域、不拖慢扫码流程——所有看似微小的坐标偏移、定时器抖动、canvas 清屏方式，都会让动效显得“粘滞”或“跳变”。真机上多测几款中低端安卓机，比写十行优化代码还管用。
