canvas线性渐变与径向渐变 + 案例

●线性渐变
通过createLinearGradient()方法实现线性渐变，它返回一个对象；

var grad = ctx.createLinearGradient(x0,y0,x1,y1);

x0,y0表示起点坐标；
x1,y1表示终点坐标；
通过grad对象的addColorStop()方法进行颜色设置

grad.addColorStop(offset,color);

offset: 表示设置颜色渐变的起始偏移量，其值在0-1之间；
color：颜色值；

案例：水平渐变、纵向渐变、倾斜渐变

<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    var grad = ctx.createLinearGradient(0,0,150,0);// 指定渐变区域，和返回一个对象 水平渐变
    grad.addColorStop (0,'#f00');// 指定颜色 红
    grad.addColorStop(0.5,'#00f'); // 绿
    grad.addColorStop(1,'#0f0');// 紫
    ctx.fillStyle = grad;// 将对象赋给fillstyle;
    ctx.rect(0,0,150,150);
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    var grad2 = ctx.createLinearGradient(150,0,150,150);// 纵向渐变
    grad2.addColorStop(0,"red");
    grad2.addColorStop(0.5,'green');
    grad2.addColorStop(1,'blue');
    ctx.fillStyle = grad2;
    ctx.rect(200,0,150,150);
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    var grad3 = ctx.createLinearGradient(400,0,550,150);// 倾斜渐变
    grad3.addColorStop(0,'rgb(192,80,77)');
    grad3.addColorStop(0.5,'rgb(155,187,89)');
    grad3.addColorStop(1,'rgb(128,100,162)');
    ctx.fillStyle = grad3;
    ctx.rect(400,0,150,150);
    ctx.fill();
    ctx.closePath();
   
</script>

●径向渐变

通过createRadialGradient(x0,y0,r0,x1,y1,r1)，返回一个对象;

var grad = createRadialGradient(150,150,20,150150,150);
grad.addColorStop(0,'red');
grad.addColorstop(1,'blue');

x0,yo,r表示渐变开始圆的圆心坐标和半径；
x1,y1,r1表示渐变结束圆心坐标和半径。

案例

<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    var grad = ctx.createRadialGradient(150,150,20,150,150,150);// 创建径向渐变
    grad.addColorStop(0,'red');
    grad.addColorStop(0.5,'yellow');
    grad.addColorStop(1,'blue');
    ctx.fillStyle = grad;
    ctx.rect(0,0,300,300);
    ctx.fill();
</script>