网格渐变生成器

功能说明

网格渐变生成器允许您在画布上放置 4 至 8 个彩色径向渐变光斑。每个光斑都可以独立调整位置（X、Y 坐标）、颜色、模糊程度和大小（通过模糊滑块影响边缘过渡）。光斑叠加后形成类似 mesh gradient 的柔和渐变效果。

使用方法

• 通过滑块选择光斑数量（4-8 个），系统会自动生成随机初始光斑。
• 每个光斑下方有对应的控制滑块和颜色选择器，拖动即可实时预览效果。
• 点击“导出 CSS”按钮，下方会生成可直接用于网页背景的 CSS 代码（多个 radial-gradient 叠加）。
• 点击“导出 PNG”按钮，会将当前画布效果导出为 PNG 图片下载。
• “重置”按钮会重新生成随机光斑。

计算原理

每个光斑对应一个 CSS radial-gradient(circle at x y, color radius, transparent blur_radius)。多个光斑通过逗号叠加在同一个 background 属性上，形成混合效果。PNG 导出使用 Canvas 的 createRadialGradient 方法，与 CSS 的径向渐变逻辑一致，确保导出效果与预览相同。

注意事项

• 颜色使用 HSLA 格式，透明度固定为 0.8，可在代码中调整。
• 模糊值越大，光斑边缘越柔和，但过大会导致光斑几乎不可见。
• 导出的 CSS 代码可直接复制到您的项目中使用，但请注意浏览器兼容性。