Canvas 放射渐变 ( RadialGradient ) - Canvas 基础教程

放射渐变 ( RadialGradient ) 就是从一个颜色值以一个点为中心向四周扩散到另一个颜色值

Canvas 使用 createRadialGradient() 方法创建一个线性渐变

createRadialGradient()

createRadialGradient() 根据参数确定两个圆的坐标，绘制放射性渐变，并返回一个渐变 CanvasGradient 对象

语法

CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

参数	说明
x0	开始圆形的 x 轴坐标
y0	开始圆形的 y 轴坐标
r0	开始圆形的半径
x1	结束圆形的 x 轴坐标
y1	结束圆形的 y 轴坐标
r1	结束圆形的半径

放射渐变的使用方法

使用 createRadialGradient() 方法创建一个指定了开始和结束点的 CanvasGradient 对象
创建成功后，可以使用 CanvasGradient.addColorStop()方法添加起始色标
然后把渐变对象赋值给 strokeStyle 或者 fillStyle 属性

范例

使用 createRadialGradient() 创建一个放射渐变

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-1" width="400" height="200">
</canvas>
</div>

<div style="border:1px solid #ccc">
<canvas id="canvas-1" width="400" height="200">
</canvas>
</div>
<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

var gradient = ctx.createRadialGradient(100,100,100,100,100,0);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"green");
ctx.fillStyle = gradient;
ctx.fillRect(0,0,200,200);
</script>

运行结果如下

范例 2

我们绘制一个具有 3D 效果的圆球

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-2" width="400" height="200">
</canvas>
</div>
<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");


// 创建渐变
var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

// 画图形
ctx.fillStyle = radgrad4;
ctx.fillRect(0,0,150,150);
</script>