移动端css paint api绘制自定义背景的核心瓶颈是性能与兼容性：chrome android≥93支持，safari/firefox不支持需降级；高dpr适配须用ctx.canvas宽高计算缩放系数；常见空白原因包括协议/响应头/名称不匹配；inputproperties必须显式声明且大小写严格一致；动画依赖css变量驱动，paint()中禁用耗时操作且每次需重置canvas状态。
移动端用 CSS Paint API 绘制自定义背景，核心瓶颈不在“能不能画”，而在“画得快不快、缩放糊不糊、重绘卡不卡”。Chrome on Android ≥ 93 支持，但 Safari 和 Firefox 完全不支持——这意味着你必须默认降级为纯 CSS 或 PNG fallback，不能指望它兜底。
paint() 里怎么适配高 DPR 屏幕？
geometry.width/height 是 CSS 像素，不是物理像素。直接用它们画图，在 iPhone 或安卓高端机上必然模糊。别手动读 window.devicePixelRatio（worklet 线程里没有 window），正确做法是：
-
ctx.canvas.width和ctx.canvas.height已自动按 DPR 缩放，直接用这两个值做坐标计算边界 - 绘图时所有尺寸（比如圆半径、线宽）也得乘以
ctx.canvas.width / geometry.width得到缩放系数，否则图形会变小 - 避免用
fillRect(0, 0, 100, 100)这种硬编码——改用fillRect(0, 0, size * scale, size * scale)
为什么 background-image: paint(myPattern) 在手机上一片空白？
最常见原因不是代码错，而是加载链断了：
-
CSS.paintWorklet.addModule()必须走 HTTPS 或localhost，file://协议下静默失败，连错误都不报 - 模块 JS 文件响应头没设
Content-Type: application/javascript，尤其用 Pythonhttp.server时默认是text/plain，Chrome 直接拒载 - CSS 中写的
paint(myPattern)和 JS 里registerPaint('myPattern', ...)名字不一致（大小写、中划线、空格），结果就是透明背景 + DevTools 里 “Paint flashing” 完全不闪
inputProperties 声明漏了会导致什么？
没声明的 CSS 自定义属性，在 properties.get('--foo') 里永远返回 undefined，且不报错。你改了 el.style.setProperty('--foo', '42')，paint() 却纹丝不动——因为浏览器根本没监听这个变量。
- 必须在 worklet 类里显式写
static get inputProperties() { return ['--cell-size', '--theme']; } - 属性名要和 CSS 里完全一致：
--Cell-Size≠--cell-size - 如果要用数值计算，记得
parseFloat(props.get('--cell-size').value)，.toString()会丢单位，.value才是原始字符串
移动端动画卡顿，是不是该换 requestAnimationFrame？
不该。worklet 线程里没有 requestAnimationFrame，也不能访问 Date.now() 或 performance.now()。想实现时间动画，唯一合法方式是：
- 主页面用
setInterval或requestAnimationFrame持续更新一个注册过的 CSS 变量，比如--time - 在 worklet 里声明
inputProperties: ['--time']，然后在paint()里读取props.get('--time').value - 别在
paint()里做循环或浮点运算——移动端 CPU 弱，一次绘制超 0.5ms 就可能掉帧
真正容易被忽略的是：每次 paint() 调用都是全新 canvas，ctx 上没缓存、没状态，所有样式（fillStyle、lineWidth）都得重设；省略 beginPath() 或漏写 fill() 会导致图形不出现，而且控制台不会提醒。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
