Canvas 填充渐变

Canvas的渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

注意：使用渐变必须使用两种或两种以上的颜色。

Canvas渐变有两种方法：

1. 线性 渐变 createLinearGradient(x1, y1, x2, y2)
   x1、y1表示渐变色开始点的坐标
   x2、y2表示渐变色结束点的坐标
   注：渐变的方向是从 x1y1 到 x2y2，如果y相同，那就是从左到右渐变，如果x相同，就是从上到下渐变，斜着渐变就需要自己调整两个位置的坐标了

2. 径向/圆 渐变 createRadialGradient(x1, y1, r1, x2, y2, r2)
   x1、y1表示渐变开始圆心的坐标，r1表示渐变开始圆心的半径
   x2、y2表示渐变结束圆心的坐标，r2表示渐变结束圆的半径。
   注：当起点圆与终点圆的圆心坐标相同时，会有一种圆形渐变的效果

Canvas添加颜色的方法（指定停止颜色）：addColorStop(value, color)
value：坐标来描述渐变的位置，取值 0~1（可以理解成整个渐变是0-100%的位置，从而设定在百分比位置的颜色）
color：渐变结束的颜色（停止颜色）

示例：

线性渐变：

// myCanvas 是canvas标签的ID
var canvas = document.getElementById("myCanvas");
if (canvas && canvas.getContext) {
    
  let ctx = canvas.getContext("2d");
  let grad = ctx.createLinearGradient(0, 150, 200, 150);	// 创建一个渐变色线性对象
  grad.addColorStop(0, "rgba(240,250,40,1)");	// 设置渐变颜色
  grad.addColorStop(0.25, "rgba(327,201,64,1)");
  grad.addColorStop(0.5, "rgba(22,184,200,1)");
  grad.addColorStop(1, "rgba(82,67,192,1)");
  ctx.fillStyle = grad;	// 设置fillStyle为当前的渐变对象
  ctx.fillRect(0, 0, 400, 400);	// 绘制渐变图形
}

径向/圆渐变

var canvas = document.getElementById("myCanvas");
if (canvas && canvas.getContext) {
    
  let ctx = canvas.getContext("2d");
  let grad = ctx.createRadialGradient(200, 200, 50, 260, 260, 200) // 创建一个渐变色径向/圆对象
  // let grad = ctx.createRadialGradient(200, 200, 50, 200, 200, 200) // 圆形渐变效果
  grad.addColorStop(0, "rgba(240,250,40,1)"); // 设置渐变颜色
  grad.addColorStop(0.25, "rgba(327,201,64,1)");
  grad.addColorStop(0.5, "rgba(22,184,200,1)");
  grad.addColorStop(1, "rgba(82,67,192,1)");
  ctx.fillStyle = grad; // 设置fillStyle为当前的渐变对象
  ctx.fillRect(0, 0, 500, 500); // 绘制渐变图形
}