深入理解canvas画布渐变之：径向渐变
本帖最后由 马黑黑 于 2022-8-30 07:31 编辑深入理解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 画布渐变就这两种：线性渐变和径向渐变。缺失角向渐变（锥形渐变）。 这个不同心的好玩，出现了探照灯一样的效果{:4_173:} 黑黑辛苦了，讲解了这么多画布知识，感谢{:4_187:} 来学习！
页:
[1]