要使用CSS Paint API实现两个圆形重叠的背景效果，需通过自定义Paint Worklet定义绘制逻辑，并在CSS中调用该绘制函数。以下是具体实现步骤和代码示例：
实现步骤- 创建HTML结构：定义一个容器元素，设置其尺寸和背景为自定义Paint函数。
- 编写Paint Worklet脚本：在JavaScript中定义绘制两个圆形的逻辑，包括位置、半径、颜色和重叠方式。
- 注册并加载Worklet：将脚本注册为CSS Paint API的绘制函数，并在HTML中动态加载。
完整代码示例1. HTML文件（index.html）<!DOCTYPE html><html><head> <title>双圆重叠背景效果</title> <style> .test { background-image: paint(doubleCircle); /* 调用自定义绘制函数 */ width: 300px; height: 300px; border: 2px solid #eee; display: flex; justify-content: center; align-items: center; color: #333; font-family: Arial, sans-serif; } </style></head><body> <div class="test"> <h1>重叠圆形</h1> </div> <script> // 检查浏览器是否支持CSS Paint API if ('paintWorklet' in CSS) { CSS.paintWorklet.addModule('demo1.js'); // 加载Worklet脚本 } else { document.body.innerHTML = '您的浏览器不支持CSS Paint API'; } </script></body></html>2. Paint Worklet脚本（demo1.js）class DoubleCircle { paint(ctx, geom, properties) { const centerX = geom.width / 2; const centerY = geom.height / 2; const radius1 = geom.width / 2; // 外圆半径 const radius2 = geom.width / 2 - 40; // 内圆半径（比外圆小40px） // 绘制外圆（青色描边） ctx.beginPath(); ctx.arc(centerX, centerY, radius1, 0, 2 * Math.PI); ctx.strokeStyle = 'cyan'; ctx.lineWidth = 3; ctx.stroke(); // 绘制内圆（白色填充+描边） ctx.beginPath(); ctx.arc(centerX, centerY, radius2, 0, 2 * Math.PI); ctx.fillStyle = 'white'; ctx.fill(); ctx.strokeStyle = 'cyan'; // 可选：内圆描边颜色 ctx.lineWidth = 2; ctx.stroke(); }}// 注册自定义绘制函数registerPaint('doubleCircle', DoubleCircle);关键点说明- 坐标与半径计算：通过geom.width和geom.height获取容器尺寸，动态计算圆心位置和半径，确保圆形居中。
- 绘制顺序：先绘制外圆（仅描边），再绘制内圆（填充+描边），实现重叠效果。
- 样式自定义：可通过修改strokeStyle、fillStyle和lineWidth调整颜色和线条粗细。
- 浏览器支持：需检查paintWorklet是否存在，不支持时显示提示信息。
效果扩展- 动态调整：通过CSS变量或属性传递参数（如半径、颜色），实现交互式效果。
- 复杂重叠：修改圆心坐标或半径差，创建非对称重叠或更多圆形叠加。
注意事项- 性能优化：避免在paint()中执行复杂计算，确保绘制逻辑高效。
- 调试工具：使用Chrome DevTools的“Layers”面板检查绘制结果。
通过上述方法，可灵活实现双圆重叠背景，并轻松扩展至其他自定义图形效果。
