CSS Paint API 简介

CSS Paint API 是 CSS Houdini 的一部分，允许开发者通过 JavaScript 自定义 CSS 的绘制行为。它能够动态生成复杂的背景、边框或其他视觉效果，直接集成到 CSS 中，无需预渲染图像或依赖额外 DOM 元素。

核心优势

• 性能优化：绘制逻辑在单独的线程运行，避免阻塞主线程。
• 动态响应：可根据 CSS 变量或属性实时更新绘制效果。
• 代码复用：通过注册自定义绘制器，实现跨项目共享。

基本使用方法

1. 注册绘制器

通过 registerPaint 方法定义绘制逻辑，需在独立的 JS 文件中编写：

// my-painter.js
class MyPainter {
  paint(ctx, geometry, properties) {
    // ctx: CanvasRenderingContext2D
    const width = geometry.width;
    const height = geometry.height;
    ctx.fillStyle = 'tomato';
    ctx.beginPath();
    ctx.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI);
    ctx.fill();
  }
}
registerPaint('my-painter', MyPainter);

2. 加载绘制器

在 HTML 中引入绘制器文件，并使用 CSS.paintWorklet 加载：

<script>
  CSS.paintWorklet.addModule('my-painter.js');
</script>

3. 在 CSS 中调用

通过 paint() 函数应用自定义绘制器：

.element {
  background-image: paint(my-painter);
  width: 200px;
  height: 200px;
}

高级应用场景

动态参数传递

通过 CSS 变量控制绘制行为，实现动态效果：

.element {
  --circle-color: #6200ee;
  background-image: paint(my-painter);
}

在绘制器中读取变量：

class MyPainter {
  static get inputProperties() { return ['--circle-color']; }
  paint(ctx, geometry, properties) {
    const color = properties.get('--circle-color').toString();
    ctx.fillStyle = color;
    // 绘制逻辑...
  }
}

复杂图案生成

结合 Canvas API 绘制渐变、纹理或几何图案：

paint(ctx, geometry) {
  const gradient = ctx.createLinearGradient(0, 0, geometry.width, 0);
  gradient.addColorStop(0, 'blue');
  gradient.addColorStop(1, 'red');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, geometry.width, geometry.height);
}

兼容性与注意事项

• 浏览器支持：Chrome、Edge 和 Opera 原生支持，Firefox 需启用实验标志，Safari 部分支持。
• 回退方案：使用 @supports 检测兼容性并提供备用样式：

  @supports (background: paint(id)) {
    .element { background-image: paint(my-painter); }
  }
  @supports not (background: paint(id)) {
    .element { background: linear-gradient(red, blue); }
  }
  

• 性能建议：避免在绘制器中执行复杂计算，优先使用缓动函数或 CSS 动画驱动变化。

实际案例参考

• 波纹效果：模拟 Material Design 按钮点击涟漪。
• 动态网格背景：根据元素尺寸自动调整网格密度。
• 自定义边框：实现虚线、点线或其他非标准边框样式。

通过 CSS Paint API，开发者可以突破传统 CSS 的限制，实现高度定制化的视觉表现，同时保持代码的简洁性和可维护性。