渐变方案
线性渐变var grd=ctx.createLinearGradient(x0,y0,x1,y1);
x0-->渐变开始的x坐标
y0-->渐变开始的y坐标
x1-->渐变结束的x坐标
y1-->渐变结束的y坐标
grd.addColorStop(0,"black"); 设置渐变的开始颜色
grd.addColorStop(0.1,"yellow"); 设置渐变的中间颜色
grd.addColorStop(1,"red"); 设置渐变的结束颜色
ctx.strokeStyle=grd;
ctx.stroke();
备注:
addColorStop(offse,color);
中渐变的开始位置和结束位置介于0-1之间,0代表开始,1代表结束。中间可以设置任何小数
☞ 径向渐变
ctx.createradialGradient(x0,y0,r0,x1,y1,r1);
(x0,y0):渐变的开始圆的 x,y 坐标
r0:开始圆的半径
(x1,y1):渐变的结束圆的 x,y 坐标
r1:结束圆的半径
页:
[1]