首页 > 网页制作 >uni-app解决小程序Canvas绘制在iOS模糊Bug

uni-app解决小程序Canvas绘制在iOS模糊Bug

来源：互联网 2026-07-13 08:10:01

iOS资讯合集

iOS真机Canvas模糊因pixelRatio为3时未适配物理像素。需设置canvas.width/height为逻辑尺寸乘dpr，调用ctx.scale(dpr,dpr)，固定CSS尺寸。获取节点用createSelectorQuery异步查询，图片先下载再绘制，重绘前重新scale。

iOS真机上的Canvas发虚，核心原因其实很简单：pixelRatio为3的时候，没有正确适配物理像素。解决方案也直白——必须同时设置canvas.width/height为逻辑尺寸乘以dpr，然后调用ctx.scale(dpr, dpr)，再配合CSS固定显示尺寸。三个步骤，缺一不可。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

为什么iOS真机上Canvas总是发虚，而开发者工具不报错？

因为微信小程序在iOS端的Canvas渲染管线对dpr更敏感，且不自动做像素对齐。开发者工具用的是Mac桌面WebView模拟，pixelRatio固定为1或2，但真实iPhone——尤其是12/13/14系列——pixelRatio直接跳到3。如果canvas还按375×667逻辑尺寸初始化，那它就不是“画得糊”，而是“画得少，再被硬生生撑大”。

必须同时改 canvas.width/height 和 ctx.scale()，缺一不可

注意，这里必须同时改canvas.width/height和ctx.scale()，缺一不可。只调scale不行，只改CSS宽高也不行。关键点在于：canvas元素的width和height属性决定绘图缓冲区物理像素数，CSS控制显示大小，两者必须按比例匹配。

canvas.width = 375 * dpr，canvas.height = 667 * dpr（以设计稿375px宽为例）
紧接着调用ctx.scale(dpr, dpr)，让后续所有坐标、字号、线宽都按逻辑尺寸写，比如fillText('hello', 20, 30)不用再乘dpr
最后，Canvas组件的:style里仍设width: '375px'; height: '667px'，保持布局不变

onReady里拿不到canvas节点？用createSelectorQuery异步查

uni-app中this.$refs.canvas在iOS真机上常为null，尤其配合v-if或条件渲染时。必须用uni.createSelectorQuery()主动查询，且要等exec回调返回node才安全。这里有几个关键点：

别在mounted里直接uni.createCanvasContext，此时DOM还没就绪
正确时机是onReady钩子 + createSelectorQuery().select('#myCanvas').fields({ node: true }).exec()
拿到res[0].node后，再调node.getContext('2d')（注意：uni-app里推荐用uni.createCanvasContext，但需传入该node）