createLinearGradient(x1,y1,x2,y2)

创建线性渐变.传入两个坐标点,为线的起止点,返回一个CanvasGradient实例,通过调用此实例的addColorStop()方法,增加颜色渐变点

  ctx.createLinearGradient(x1,y1,x2,y2)

示例使用代码

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

参数

Number 起点x坐标

Number 起点y坐标

Number 终点x坐标

Number 终点y坐标


测验

添加1个或多个颜色变化值.addColorStop(0.5,'red')方法添加渐变值,参数1表示在50%的位置添加红色,意思是到50%时渐变成红色

下图第1条没有渐变,因为它只添加了一个值,红色.第2条在0%和100%添加了红色和绿色,所以由红渐变为绿

最后一条色带,在0%,25%,50%,75%,100%处添加了5种颜色,可见渐变处过滤变化.下方的文字的颜色,没错,正是按渐变色的设置变化的.

上图是水平线渐变,再看斜线和垂直线渐变

下图左设置渐变ctx.createLinearGradient(0, 0, 150, 150),是一条斜线,而右边则是一条垂直线

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