HTML5 Canvas支持线性与径向渐变，通过createLinearGradient()和createRadialGradient()创建，使用addColorStop()添加颜色节点，并赋值给fillStyle或strokeStyle实现平滑色彩过渡效果。
在HTML5的Canvas中，渐变是一种常用的视觉效果，可以通过CanvasGradient对象实现。Canvas支持两种类型的渐变：线性渐变和径向渐变。下面详细介绍它们的创建方法和使用技巧。
创建线性渐变
线性渐变是颜色沿着一条直线从起点到终点平滑过渡的效果。使用createLinearGradient()方法可以创建一个线性渐变对象。
该方法接收四个参数：createLinearGradient(x1, y1, x2, y2)，分别表示渐变的起始点 (x1, y1) 和结束点 (x2, y2)。
创建后，需要通过addColorStop()方法添加颜色节点，定义渐变的颜色分布。
立即学习“前端免费学习笔记（深入）”；
- 设置渐变方向：例如水平渐变可设为(0,0,200,0)，垂直渐变为(0,0,0,200)
-
添加颜色节点：调用
gradient.addColorStop(位置, 颜色)，位置是0.0到1.0之间的数值 -
应用到绘图：将渐变对象赋值给
fillStyle或strokeStyle
示例代码：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'green');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
创建径向渐变
径向渐变是从一个中心点向外扩散的圆形渐变，常用于模拟光照或球体效果。使用createRadialGradient()方法创建。
该方法有六个参数：createRadialGradient(x1, y1, r1, x2, y2, r2)，表示两个圆：起始圆的中心(x1,y1)和半径r1，结束圆的中心(x2,y2)和半径r2。
通常让两个圆心重合，通过调整半径实现从内到外的颜色过渡。
- 常见用法：两圆心相同，r1较小（甚至为0），r2较大
-
颜色控制：同样使用
addColorStop()添加多个颜色节点 - 适用场景：圆形填充、按钮高光、阴影效果等
示例代码：
const radialGradient = ctx.createRadialGradient(100, 100, 10, 100, 100, 50); radialGradient.addColorStop(0, 'white'); radialGradient.addColorStop(1, 'blue');ctx.fillStyle = radialGradient; ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.fill();
渐变使用技巧
实际开发中，合理使用渐变能提升界面质感。注意以下几点可避免常见问题。
- 坐标系理解：渐变坐标基于画布坐标系，不是图形局部坐标
- 性能考虑：复杂渐变频繁重建会影响性能，可缓存Gradient对象
- 兼容性：所有现代浏览器都支持，但旧版IE需注意
- 透明度支持：可以在颜色中使用rgba()实现透明渐变
比如实现透明遮罩效果：
const maskGradient = ctx.createLinearGradient(0, 0, 0, 100); maskGradient.addColorStop(0, 'rgba(0,0,0,0)'); maskGradient.addColorStop(1, 'rgba(0,0,0,0.8)');
基本上就这些。掌握线性与径向渐变的创建方式后，结合图形绘制，可以实现丰富的视觉效果。关键在于理解坐标定义和颜色节点的分布逻辑。
