ctx.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
xStart:发散开始圆心x坐标
yStart:发散开始圆心y坐标
radiusStart:发散开始圆的半径
xEnd:发散结束圆心的x坐标
yEnd:发散结束圆心的y坐标
radiusEnd:发散结束圆的半径
径向渐变较为复杂,以下通过辅助线演示各种情况下径向渐变的实际效果
1. 填充图形为两个圆心连线上找到一点p,使得直线pa与pb分别与两圆相切,则圆弧apb与填充的容器相交的区域即为最终填充效果。
1.1. 渐变图形与两个圆心半径有关
1.2. 绘制的最终效果与渐变和图形有关
2. createRadialGradient画一个正常的圆球效果,应遵循以下几点:
2.1. createRadialGradient()方法中,起始圆半径小于结束圆半径
2.2. 起始圆完全在终止圆的范围内
2.3. 终止圆在绘制区域内