Canvas中实现颜色渐变填充需先用createLinearGradient或createRadialGradient创建渐变对象，再通过addColorStop添加色标，赋给fillStyle后调用fillRect或fill等绘图方法即可完成线性、径向或路径渐变填充。
Canvas 中实现颜色渐变填充，核心是使用 createLinearGradient 或 createRadialGradient 创建渐变对象，再将其赋给 fillStyle，最后调用绘图方法（如 fillRect、fill）即可。
线性渐变：从左到右、上到下等方向过渡
线性渐变按指定起点和终点连线方向平滑过渡颜色。关键参数是起点坐标 (x1, y1) 和终点坐标 (x2, y2)：
- 从左到右：用
ctx.createLinearGradient(0, 0, width, 0) - 从上到下：用
ctx.createLinearGradient(0, 0, 0, height) - 对角线（左上→右下）：用
ctx.createLinearGradient(0, 0, width, height)
创建后需用 addColorStop(offset, color) 添加至少两个色标（offset 是 0–1 之间的归一化位置，例如 0 表示起点，0.5 表示中点，1 表示终点）：
const gradient = ctx.createLinearGradient(0, 0, 200, 0); gradient.addColorStop(0, '#ff9a9e'); // 左端：浅粉 gradient.addColorStop(1, '#fad0c4'); // 右端：米橘 ctx.fillStyle = gradient; ctx.fillRect(0, 0, 200, 100);
径向渐变：以圆心为中心向外扩散
适合圆形、球体或聚焦效果。需指定两个圆：起始圆 (x1, y1, r1) 和结束圆 (x2, y2, r2)，两圆中心可不同（实现偏移光效）：
立即学习“Java免费学习笔记（深入）”；
- 标准同心圆：两圆圆心相同，半径不同，如
createRadialGradient(100, 100, 0, 100, 100, 80) - 模拟高光：小起始圆在左上，大结束圆覆盖整个区域，产生亮斑感
同样需用 addColorStop 设置颜色节点：
const radial = ctx.createRadialGradient(50, 50, 0, 50, 50, 60); radial.addColorStop(0, '#fff'); radial.addColorStop(1, '#666'); ctx.fillStyle = radial; ctx.beginPath(); ctx.arc(50, 50, 60, 0, Math.PI * 2); ctx.fill();
渐变填充路径（不规则形状）
只要先用 beginPath() + 路径方法（moveTo、lineTo、arc 等）定义好路径，再设置 fillStyle 为渐变对象，调用 fill() 即可填充任意闭合图形：
- 确保路径已闭合（显式
closePath()或自动闭合如arc） - 渐变坐标系基于 Canvas 原点（左上角），不受当前变换影响（除非你主动对 canvas 应用了
transform） - 若想让渐变随图形“贴合”，需按图形尺寸动态计算渐变坐标
例如绘制一个带渐变的三角形：
ctx.beginPath(); ctx.moveTo(50, 10); ctx.lineTo(90, 90); ctx.lineTo(10, 90); ctx.closePath(); <p>const triGrad = ctx.createLinearGradient(10, 50, 90, 50); triGrad.addColorStop(0, 'gold'); triGrad.addColorStop(1, 'orange'); ctx.fillStyle = triGrad; ctx.fill();
实用技巧与注意事项
避免常见问题，提升控制精度：
- 坐标单位是像素，不是百分比；渐变范围需匹配实际绘制区域大小
- 多次复用同一渐变对象无需重复创建，但注意它会记住所有
addColorStop设置 - 透明度支持良好：可用
rgba(255, 0, 0, 0.5)或hsla(...)实现透明过渡 - 不能直接对已有填充内容“叠加”渐变；渐变必须在绘制前设为
fillStyle - 调试时可临时用
strokeRect框出渐变区域，确认坐标是否合理
