在canva0s画出的矩形, 圆形, 线条, 文本等的各种形状中,可以使用渐变来对各种形状的填充颜色进行一定程度上的颜色渐变效果,实现效果如下图所示
createRadialGradient(x,y,r,x1,y1,r1) - 创建(圆形)梯度渐变
addColorStop(index,color)方法指定颜色停止,参数使用index来描述,index范围在0-1之间,0.5即给定横纵坐标的50%,color给定当前渐变点index出的颜色。其中,当我们使用渐变对象,必须使用两种或两种以上的停止颜色。
使用渐变,设置fillStyle或strokeStyle的值为渐变。
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #c3c3c3;">
</canvas>
<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
var grd=ctx.createRadialGradient(0,0,0,0,0,200);
grd.addColorStop(0,'yellow');
grd.addColorStop(0.2,'red');
grd.addColorStop(0.4,'pink');
grd.addColorStop(0.6,'green');
grd.addColorStop(0.8,'orange');
grd.addColorStop(1,'blue');
ctx.fillStyle=grd;
ctx.fillRect(10,10,200,200);
</script>
以上代码最终效果
代码解释
var grd=ctx.createRadialGradient(0,0,0,0,0,200);
createRadialGradient(x,y,r,x1,y1,r1),x,y,z给定梯度渐变起始区域,以x=0,y=0,r=0画圆为起始区域,在图中为原点为其实区域,以x1=0,y1=0,r1=200画圆为终止区域,在图中最外层圆为终止区域,其中因为未填满整体框格,最外层蓝色扩散到整个窗格
grd.addColorStop(0,'yellow');
grd.addColorStop(0.2,'red');
grd.addColorStop(0.4,'pink');
grd.addColorStop(0.6,'green');
grd.addColorStop(0.8,'orange');
grd.addColorStop(1,'blue');
添加渐变停止点,grd.addColorStop(index,color),index范围0-1,本里中在index=0设置颜色黄色,index=0.2设置颜色为红色,….,index=1设置颜色为蓝色,即以(0,0,0)–>(0,0,200)分别作圆,包裹区域为梯度渐变区域,0–>20%范围区域从黄色渐变到红色,…,在80%–>100%区域从橘色渐变到蓝色
再举一个例子,本例子中将实现颜色从中间开始渐变
var grd=ctx.createRadialGradient(110,110,30,110,110,100);
以x=110,y=110,r=30画圆为起始区域,以x1=110,y1=110,r1=100画圆为终止区域,在图中最外层圆为终止区域,其中因为未填满整体框格,最外层蓝色扩散到整个窗格
最终效果如下图