CSS3渐变

1、线性渐变

  CSS3渐变：
        linear-gradient:3个参数 是颜色，还有一个参数可以设置方向
        background: linear-gradient()；
        右下角
        background: linear-gradient(to right bottom, red, green, blue)
        左上角
        background: linear-gradient(to left top, red, green, blue)
  
  canvas渐变：
        var grad = ctx.createLineargradient(x1,y1,x2,y2);
        grad.addColorStop('0','red');
        grad.addColorStop('0','orange');
        ctx.fillStyle = grad;
        ctx.stroke();

2、径向渐变

  CSS3径向渐变：
        radial-gradinent:三个参数是颜色， 其中一个参数是ellipse 是椭圆、circle是圆
        background:radial-gradinent()
        椭圆
        background: radial-gradient(ellipse, red, pink, orange);
        圆
        background: radial-gradient(circle, red, pink, orange);
  
  canvas径向渐变：
        var grad = createRadialGradient(x1,y1,r1,x2,y2,r2);
        grad.addColorStop('0','red');
        grad.addColorStop('1','blue');
        ctx.fillStyle = grad;
        ctx.stroke();