深入理解canvas画布渐变之：径向渐变

马黑黑

深入理解canvas画布渐变之：径向渐变 | 马黑黑

要在canvas画布中使用径向渐变，和线性渐变一样，先需创建一个渐变方案，用的画笔指令是 createRadialGradient()，它需要6个参数：

        ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);

这六个参数分两组，第一组 x1、y1、r1 分别是第一个径向即圆的圆心{x,y}坐标和半径（r），同理，第二组参数则是第二个径向圆的圆心{xy}坐标和半径（r）。弄清楚各参数的含义，我们就可以具体定义一个径向渐变（也称圆形渐变）方案。我们还是在 400*400 的画布上操作：

        let gradient = ctx.createRadialGradient(200, 200, 10, 200, 200, 200);

第一个渐变圆环xy坐标是{200,200}，半径是10，第二个渐变圆环xy坐标也是 {200.200}，半径200。两个渐变圆环共用一个圆心坐标，大小由其半径决定，这里半径200的在外层，半径为10的在里层。

接着我们给渐变方案添加颜色，方法和线性渐变的一样：

gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'green');

然后把渐变方案当做画笔的 fillStyle：

ctx.fillStyle = gradient;

最后全幅绘制矩形：

ctx.fillRect(0, 0, 400, 400);

使用 createRadialGradient() 方法定义径向渐变，前后两组渐变圆的圆心可以不再同一个圆心上，结合半径和颜色设定，可以营造出不同于CSS径向渐变的效果。下面给出一个较为简单的不同圆心的径向渐变实例：

<div id="papa">
        <canvas id="canv" width="400" height="400"></canvas>
</div>

<script>


let ctx = canv.getContext('2d');
let gradient = ctx.createRadialGradient(200, 200, 10, 100, 100, 200);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'green');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canv.width, canv.height);


</script>

马黑黑

canvas 画布渐变就这两种：线性渐变和径向渐变。缺失角向渐变（锥形渐变）。

红影

这个不同心的好玩，出现了探照灯一样的效果

红影

黑黑辛苦了，讲解了这么多画布知识，感谢

加林森

来学习！