canvas 的 createradialgradient 方法用于创建径向渐变，参数为两个圆的圆心坐标与半径（x0,y0,r0,x1,y1,r1），支持偏移、r0=0 高光等灵活用法，需配合 addcolorstop 和 fillstyle 才生效，调试时可用 strokerect 验证圆位置。
Canvas 的 createRadialGradient 方法用于创建圆形或椭圆形的径向渐变效果，常用于模拟光源、球体、按钮高光等视觉场景。它比线性渐变更强调中心感和空间纵深，但参数理解稍有门槛——关键在于两个圆（起始圆与结束圆）的定位与半径关系。
参数含义与基本用法
调用格式：ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)，共六个数值参数：
- x0, y0, r0：起始圆的圆心坐标和半径（颜色起点）
- x1, y1, r1：结束圆的圆心坐标和半径（颜色终点）
注意：两个圆可以重合圆心，也可以偏移；r0 可为 0（常见于高光点），r1 通常更大；若 r0 > r1 或两圆位置导致起始圆完全包住结束圆，渐变仍有效，但过渡区域会压缩或反向延伸。
典型应用场景与写法示例
画一个带高光的灰色球体：
const gradient = ctx.createRadialGradient(80, 60, 0, 100, 80, 50); gradient.addColorStop(0, '#fff'); // 中心高光 gradient.addColorStop(0.7, '#aaa'); // 主体灰 gradient.addColorStop(1, '#555'); // 暗部边缘 ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(100, 80, 50, 0, Math.PI * 2); ctx.fill();
这里起始圆在 (80,60) 半径为 0（即一个点），结束圆在 (100,80) 半径为 50，形成从左上偏移位置发出的柔和扩散光感。
常见误区与调试技巧
- 渐变对象需通过
fillStyle或strokeStyle赋值后才生效，单独创建不渲染 - 渐变坐标系基于 Canvas 元素自身（非 CSS 缩放后的坐标），缩放 canvas 时需同步调整渐变参数或使用
setTransform - 若出现“色块突变”或“渐变不显示”，检查是否漏掉
addColorStop，或起始/结束圆完全重叠且半径相同（此时退化为纯色） - 可临时用
strokeRect绘制两个参考圆，直观验证 x0/y0/r0 和 x1/y1/r1 的实际位置关系
进阶：动态控制与性能提示
径向渐变支持运行时修改 stop 颜色（通过重新赋值 gradient 并重绘），适合做简单交互动画（如悬停变色）。但频繁创建新 gradient 对象可能影响性能，建议复用已创建的 gradient 实例，仅更新 color stops 内容。
不复杂但容易忽略：只要两个圆定义明确，浏览器就能算出每像素到两圆的相对距离比例，从而插值混合颜色——这就是径向渐变的底层逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
