uni-app App端图片对比滑块必须用canvas而非view+transform，因iOS对cover-view/transform渲染不一致、无clip-path硬件加速、cover-image不响应touchmove；canvas可稳定裁剪、实时绘制并保持60fps。
uni-app App端图片对比滑块为什么用 canvas 而不是 view + transform
App端（尤其是 iOS）对 view 层叠+滑动的渲染一致性差，transform: translateX 在 cover-view 或原生子视图中常失效或卡顿；canvas 是唯一能稳定控制裁剪区域、响应滑动并保持 60fps 的方案。
关键原因：uni-app 的 App 端（Android/iOS）不支持 CSS clip-path 硬件加速，且 cover-image 不响应 touchmove 的实时位置——必须靠 canvas 手动绘制左右图层+动态裁剪。
- 不能用
scroll-view模拟：它会触发滚动条、无法精确控制裁剪边界 - 避免在
onTouchMove中频繁调用drawCanvas：会导致 iOS 崩溃，必须节流（建议requestAnimationFrame或 16ms 间隔） - Android 上
canvas绘制需指定useWebView为false（默认值），否则部分机型白屏
uni.createCanvasContext 在 App 端的初始化坑点
直接调用 uni.createCanvasContext('myCanvas', this) 在 App 端可能返回空上下文，尤其在 onReady 阶段 canvas 元素尚未挂载完成。
- 必须等
canvas组件的onReady回调触发后才初始化上下文，不能写在data或created - App 端 canvas 必须设固定宽高（
width/height属性），百分比或flex无效 - iOS 下若 canvas 宽高超过屏幕尺寸 2 倍，绘制会失真，建议按设备像素比缩放：用
uni.getSystemInfoSync().pixelRatio计算实际绘图尺寸
示例初始化：
<canvas canvas-id="compareCanvas" style="width: 100%; height: 400px;" @ready="onCanvasReady"></canvas>
onCanvasReady 中执行：
const query = uni.createSelectorQuery().in(this);
query.select('#compareCanvas').fields({ node: true, size: true }, res => {
const canvas = res.node;
const ctx = uni.createCanvasContext('compareCanvas', this);
// 后续绘制逻辑...
});滑块拖动时如何同步更新左右图裁剪区域
核心是把滑块位置（0–100%）映射为 canvas 上的 x 坐标，再用 ctx.clip() 切出左图区域，重绘右图覆盖剩余部分。
- 滑块
touchstart时记录初始clientX，touchmove中计算偏移量，再转成 canvas 坐标系（注意 devicePixelRatio 缩放） - 左图绘制区域：从
0到滑块 x 坐标；右图从滑块 x 坐标到 canvas 宽度 —— 二者必须无缝拼接，否则出现 1px 白边 - 不要每帧清空整个 canvas（
ctx.clearRect），而是只重绘变化区域，否则 Android 低端机掉帧严重 - 滑块本身用
ctx.fillRect绘制，别用额外view，否则 iOS 上层遮挡导致触摸穿透失效
裁剪逻辑示意：
// leftImg 和 rightImg 已通过 createImageBitmap 加载 ctx.drawImage(leftImg, 0, 0, sliderX, height, 0, 0, sliderX, height); ctx.drawImage(rightImg, sliderX, 0, width - sliderX, height, sliderX, 0, width - sliderX, height);
App 端真机调试时图片加载失败的常见原因
App 端 canvas 绘制图片，drawImage 报错 “InvalidStateError” 或静默失败，90% 是路径或跨域问题。
- 本地图片必须用
uni.getRealPathSync转成绝对路径（__APP__/static/xxx.png→/data/user/0/xxx/files/__APP__/static/xxx.png） - 网络图片需服务端开启 CORS，且
uni.downloadFile后用临时路径（tempFilePath）传入createImageBitmap，不能直接传 URL - iOS 上
createImageBitmap对 GIF/WEBP 支持差，强制转成 PNG 再绘制 - Android 某些厂商（如华为 EMUI）限制后台加载图片，务必在
onShow后再触发图片加载
正确加载流程：
uni.downloadFile({
url: 'https://xxx.com/before.png',
success: (res) => {
if (res.statusCode === 200) {
const img = uni.createImageBitmap(res.tempFilePath);
// 后续传给 drawImage
}
}
});App 端图片对比滑块最麻烦的从来不是滑动逻辑，而是三件事：canvas 初始化时机、图片路径转换规则、以及 iOS 上每一帧绘制前都要手动校验 ctx 是否还有效——这个检查很容易被忽略，但一旦失效，后续所有 drawImage 都静默失败。
