Paint Worklet 在独立渲染线程运行，实现非阻塞绘制；其“原始算法美”指用确定性数学逻辑（如极坐标、模运算、递归分形、斐波那契）生成有序图案，通过 CSS 自定义属性驱动动态演化，并需克制性能开销以保障合成友好。
Paint Worklet 本身不“异步绘制”——它运行在独立的渲染线程（Worklet 线程），天然隔离主线程，从而实现真正意义上的非阻塞绘制。所谓“具备原始算法美”，指用简洁、可复现的数学逻辑（如分形、模运算、极坐标映射、递归结构简化版）生成视觉上富有秩序感与生长感的图案，而非依赖图像资源或复杂状态管理。
一、核心前提：正确加载与注册 Worklet
Paint Worklet 必须作为独立同源 JS 文件加载，不能内联、不能跨域、不能动态 eval：
- 创建 pattern.js 文件（例如放在
/worklets/pattern.js） - 页面中用
CSS.paintWorklet.addModule('/worklets/pattern.js')加载（返回 Promise，需 await 或 .then） - 确保注册名（如
'algopattern'）与 CSS 中paint(algopattern)完全一致 - Chrome/Edge ≥ 88 支持；Firefox 和 Safari 当前（2026 年中）仍无原生支持，需降级 fallback
二、用数学逻辑定义“原始算法美”
避开随机数和外部数据，专注确定性计算。例如以下经典结构可直接嵌入 paint()：
-
同心螺旋：用极坐标
r = a + b·θ映射为像素点，每圈旋转固定角度，颜色按hsl(θ % 360, 80%, 60%)变化 -
模格阵列：遍历画布网格，填充色由
(x + y) % N决定，N 可设为质数（如 7、11）增强节奏感 - 递归分形简写：模拟 Sierpinski 三角形逻辑——对区域做三次缩放平移绘制，深度控制在 3–4 层，避免性能损耗
-
斐波那契铺排：用
Fₙ控制圆点半径或间距，位置按黄金角137.5°递增，自然形成疏密韵律
三、接入 CSS 自定义属性实现动态演化
算法参数不应硬编码，而应通过 CSS 自定义属性驱动，让样式具备响应性与可配置性：
- 在 Worklet 类中声明
static get inputProperties()，例如：return ['--scale', '--hue-shift', '--depth']; - 在
paint(ctx, geom, props)中读取：const scale = props.get('--scale').value || 1;const hue = (props.get('--hue-shift').value || 0) % 360; - 在 HTML 元素上设置：
style="--scale: 1.2; --hue-shift: calc(var(--scroll-y) * 0.3);" - 滚动、悬停、媒体查询均可实时更新这些属性，Worklet 自动重绘，无需 JS 操作 canvas
四、性能关键：克制与合成友好
“原始美”不等于高开销。Worklet 的优势在于浏览器能将其纳入合成管线（Compositor），但前提是逻辑轻量：
- 避免
ctx.getImageData、ctx.fillText、大量对象创建；优先用fillRect、arc、fillPath等原生路径操作 - 控制循环次数：若遍历全画布，用
Math.floor(geom.width / step)限定采样密度，而非逐像素 - 利用
geometry（即{ width, height }）做自适应缩放，不依赖window或document - 启用
will-change: background可提示浏览器提前准备图层，但仅对频繁变化区域使用
本质上，Paint Worklet 是把“绘图即代码”的思想注入 CSS 生态——你写的不是样式规则，而是可编译、可调度、可合成的图形算法单元。只要逻辑干净、输入明确、输出确定，它就能安静地在后台生成带着数学呼吸感的背景，不抢主线程，不破布局流，也不失一分原始之美。
