样式渐变与阴影
渐变是"颜色对象"，先创建、再用作 fillStyle。线性渐变 createLinearGradient(x0,y0,x1,y1) 沿两点连线过渡；径向渐变 createRadialGradient(x0,y0,r0,x1,y1,r1) 从内圆向外圆扩散，适合做光晕。颜色用 addColorStop(位置, 颜色) 添加，位置取 0~1，可加任意多个色标。
阴影由四个属性控制：shadowColor 颜色、shadowBlur 模糊半径、shadowOffsetX/shadowOffsetY 偏移量。注意阴影是"状态"——设置后对后续所有绘制生效，不需要时记得清零，这是很多"阴影越画越多"问题的根源。
透明度可以用 globalAlpha（0~1，影响所有绘制）或直接在 fillStyle 里写 rgba 颜色（只影响当前颜色），叠加绘制半透明图形时后者更可控。
本节要点渐变 = 创建渐变对象 + addColorStop 上色标 + 赋给 fillStyle；阴影四属性设置后全局生效，用完记得清零；透明度用 rgba 或 globalAlpha。
JavaScript
var ctx = document.getElementById('cv').getContext('2d'); // 线性渐变：从 (0,0) 到 (200,0) 水平过渡 var g = ctx.createLinearGradient(0, 0, 200, 0); g.addColorStop(0, '#e5534b'); // 起点：红色 g.addColorStop(0.5, '#e78a3e'); // 中点：橙色 g.addColorStop(1, '#3fb950'); // 终点：绿色 ctx.fillStyle = g; ctx.fillRect(10, 10, 200, 60); // 阴影：设置后对所有后续绘制生效 ctx.shadowColor = 'rgba(0,0,0,0.4)'; ctx.shadowBlur = 10; // 模糊半径 ctx.shadowOffsetX = 4; // 右偏 4px ctx.shadowOffsetY = 4; // 下偏 4px ctx.fillRect(240, 10, 100, 60); // 用完必须清零，否则阴影"粘"到后面的图形上 ctx.shadowColor = 'transparent'; ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0;
📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读