createRadialGradient(x1,y1,r1,x2,y2,r2)

创建放射渐变.传入两个坐标点和半径,为两个圆的圆心和半径,返回一个CanvasGradient实例,通过调用此实例的addColorStop()方法,增加颜色渐变点

  ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)

示例使用代码

    // 调用此方法得到对象
    let gradient = ctx.createRadialGradient(20, 20, 10, 50, 50, 30);
    // 设置渐变关键位置颜色
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(.5, 'green');
    gradient.addColorStop(1, 'blue');
    // 赋值给样式属性
    ctx.fillStyle = gradient;
    // 绘画
    ctx.fillRect(0, 0, 300, 150);

参数

Number 圆心1 x坐标

Number 圆心1 y坐标

Number 圆心1半径

Number 圆心2 x坐标

Number 圆心2 y坐标

Number 圆心2半径


测验

放射渐变可理解为从一点向外放射,这个点可相像成圆锥的顶点,然后从顶点去看圆锥的底,相像这个圆锥是由这个顶点开始,根据一定规则发射到底

圆锥的横截面是圆,取其中两个不同的截面(圆),可以确定一个圆锥.createRadialGradient()的参数即是这两个圆的圆心坐标和半径.

下图左侧和右侧是两个放射渐变,截面圆大小选取相同,颜色渐变点左侧为红绿,右侧为红绿蓝黄棕.

注意一个现象,放射渐变影响的填充范围,只是在这两个横截圆确定的圆锥内(确切的说是圆锥的横截面)

再来个对角线

<<H5核心技术图形动画与游戏开发(David Geary)>> (53页)