HTML5画布之颜色渐变方法（二）
之前的课程我们在介绍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>
<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> <canvas id="grd1" width="300" height="300">您的浏览器不支持canvas</canvas>
<script>
let cs1 = document.getElementById('grd1'); //画布操作句柄
let cst1 = cs1.getContext('2d'); //画笔句柄
//创建渐变渲染区域
//let mygrd1 = cst1.createRadialGradient(110,110,5,110,110,100); //从中央发起渐变
let mygrd1 = cst1.createRadialGradient(0,0,10,50,30,200); //从左上角发起渐变
//加入N多颜色
mygrd1.addColorStop(0,"black");
mygrd1.addColorStop(0.2,"orange");
mygrd1.addColorStop(0.4,"blue");
mygrd1.addColorStop(0.6,"red");
mygrd1.addColorStop(0.8,"yellow");
mygrd1.addColorStop(1,"green");
cst1.fillStyle = mygrd1; //填充色赋值
cst1.fillRect(10,10,200,200); //画出渐变矩形
</script> let mygrd = cst.createRadialGradient(0,0,10,50,30,200) 这里的50 30 没看懂，为什么不是xy等值？
是不是cst.fillRect(10,10,200,200);里的10 10 是0 0 的时候，50和30就可以是等值了？ 放射渐变是一定需要fillRect() 方法着色来填充的吧？
cst.fillRect(10,10,200,200); 给出了矩形的长宽了，还要<canvas id="grd" width="300" height="300">画布的长宽做什么。画布的长宽也是必须设的么？ 红影 发表于 2022-3-1 20:04
放射渐变是一定需要fillRect() 方法着色来填充的吧？
cst.fillRect(10,10,200,200); 给出了矩形的长宽了 ...
画布是父元素，它的尺寸要大于里面的元素（总和），不信你试试看 红影 发表于 2022-3-1 19:55
let mygrd = cst.createRadialGradient(0,0,10,50,30,200) 这里的50 30 没看懂，为什么不是xy等值？
是不 ...
等值不等值没关系，等值或按比例赋值表示第二个圆的圆心也在那里，同心圆的关系 画布的功能也是这么多，要每个都懂对我来说感觉有点难度，得花时间学习的 小辣椒 发表于 2022-3-1 22:25
画布的功能也是这么多，要每个都懂对我来说感觉有点难度，得花时间学习的
有人说过：canvas画布，要容易也容易，几行代码搞定一个特效；要难也难，头发白了一半还搞不定一些原理 马黑黑 发表于 2022-3-1 21:04
画布是父元素，它的尺寸要大于里面的元素（总和），不信你试试看
父元素下，还要加fillRect里的尺寸才行么？ 马黑黑 发表于 2022-3-1 21:08
等值不等值没关系，等值或按比例赋值表示第二个圆的圆心也在那里，同心圆的关系
等值但不在原位置啊，怎么会是同心圆呢？ 小黑又讲新课了呵，可惜我一句也没听懂。{:4_198:} 樵歌 发表于 2022-3-2 07:34
小黑又讲新课了呵，可惜我一句也没听懂。
这个有点难 红影 发表于 2022-3-1 23:35
等值但不在原位置啊，怎么会是同心圆呢？
人家就是指定的圆心xy坐标 红影 发表于 2022-3-1 23:33
父元素下，还要加fillRect里的尺寸才行么？
画布里，画什么都要用到ink方法（stroke）或填充方法（fill） 马黑黑 发表于 2022-3-3 14:17
人家就是指定的圆心xy坐标
嗯嗯，下回画出来看看就明白了。 红影 发表于 2022-3-3 15:43
嗯嗯，下回画出来看看就明白了。
嗯嗯，好多文档对这个也是语焉不详，就说圆的xy坐标 马黑黑 发表于 2022-3-3 14:18
画布里，画什么都要用到ink方法（stroke）或填充方法（fill）
嗯嗯，否则无法展示出来吧。 马黑黑 发表于 2022-3-3 15:46
嗯嗯，好多文档对这个也是语焉不详，就说圆的xy坐标
只能自己去慢慢体会了。 红影 发表于 2022-3-3 16:32
只能自己去慢慢体会了。
是的
页:
[1]
2