HTML5画布之颜色渐变方法（二）

马黑黑 · 发表于 2022-3-1 18:14

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

之前的课程我们在介绍canvas画布的线性渐变时提到过发射状圆形渐变，但未展开讨论，在此开帖专门讲一讲。比起线性渐变，发射状圆形渐变较为复杂且相对难以理解，它带有六个参数：

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

x0 : 起始圆x坐标
y0 : 起始圆y坐标
r0 : 起始圆半径
x1 : 结束圆x坐标
y1 : 结束圆y坐标
r1 : 结束圆半径

圆形渐变实际上由至少两个闭合的颜色圆环构成，这样就存在开始的圆环和结束的圆环，圆形渐变方法需要这两个圆的xy坐标和半径做其参数。

设画笔句柄为 cst，再设我们将要画一个这样的圆：

cst.fillRect(10,10,200,200);

亦即在画布的（10,10）坐标处起笔画一个 200*200 的矩形，则圆形渐变的渲染区域应该尽可能围绕实际上是依据矩形的尺寸来设计：

let mygrd = cst.createRadialGradient(110,110,5,110,110,100);

以上渐变设计是以从矩形的正中央开始发起，起始圆的xy坐标都是110、半径是5，结束圆的xy坐标也都是110（可以不是这个数）但半径变为了100以便令渐变铺满整个矩形。事实上，个人觉得，圆形渐变更适用于圆形对象。

如果我们想让渐变从左上角发起，则这样设计渐变渲染区域：

let mygrd = cst.createRadialGradient(0,0,10,50,30,200);

应该注意的是，起始圆和结束圆的xy及半径的取值尽可能理性，尽量不要凭空想象，否则可能会得出很怪异的形状或达不到自己所需的结果。

自然地，与线性渐变一样，颜色的设计环节不可或缺，请在实例代码中体会：

<canvas id="grd" width="300" height="300">您的浏览器不支持canvas</canvas>

<script>

let cs = document.getElementById('grd'); //画布操作句柄
let cst = cs.getContext('2d'); //画笔句柄
//创建渐变渲染区域
let mygrd = cst.createRadialGradient(110,110,5,110,110,100); //从中央发起渐变
//let mygrd = cst.createRadialGradient(0,0,10,50,30,200); //从左上角发起渐变
//加入N多颜色
mygrd.addColorStop(0,"black");
mygrd.addColorStop(0.2,"orange");
mygrd.addColorStop(0.4,"blue");
mygrd.addColorStop(0.6,"red");
mygrd.addColorStop(0.8,"yellow");
mygrd.addColorStop(1,"green");

cst.fillStyle = mygrd; //填充色赋值
cst.fillRect(10,10,200,200); //画出渐变矩形

</script>