HTML5 Canvas渐变是可以用作形状的填充或笔触的颜色模式，而不是纯色。渐变是从一种颜色渐变到另一种颜色的颜色模式。渐变有两种类型：Linear（线性）和Radial（径向） 有两种类型的渐变:
- Linear（线性）
- Radial（径向）
线性渐变使用水平，垂直或对角线的线性图案更改颜色。
径向渐变用圆形图案改变颜色，从里到外改变颜色。
两种类型的渐变都在本文中介绍。
线性渐变
如前所述，线性渐变使用线性图案更改颜色。使用2D上下文函数创建线性渐变 createLinearGradient()。
颜色停止
为了设置渐变的颜色，可以addColorStop()在渐变对象上使用该功能。
使用渐变作为填充或描边样式
您可以将渐变用作填充或笔触样式。
渐变梯度范围
重要的是要了解渐变的程度。如果渐变从x = 10扩展到x = 110，则只有x值在10到110之间的图形才会应用渐变颜色。在此区域之外绘制的图形仍会受到渐变的影响，但是将使用渐变的第一种或最后一种颜色进行绘制。
例如，假设一个梯度从x = 150扩展到x =350。该梯度将从蓝色渐变为绿色。x值小于150绘制的所有图形都将以蓝色绘制。x值大于350绘制的所有图形都将以绿色绘制。只有x值介于150和350之间的图形才会具有渐变颜色。
径向渐变
径向渐变类型是从内部颜色向外延伸到一种或多种其他颜色的圆形图案。
