绘制渐变

线性渐变

语法

createLinearGradient(x1, y1, x2, y2);

使用 createLinearGradient(x1, y1, x2, y2) 可以创建一个线性渐变,线性渐变会从第一个点(x1, y1)扩展到第二个点(x2, y2),即定义了渐变的线长与方向。

如:

let x1 = 0;
let y1 = 0;
let x2 = 100;
let y2 = 0;
let linearGradient1 = ctx.createLinearGradient(x1, y1, x2, y2);
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb(0, 0, 255');
linearGradient1.addColorStop(1, 'rgb(0, 0, 0)');
ctx.fillStyle = linearGradient1
ctx.fillRect(10, 10, 100, 50);

语法

addColorStop(startColor, endColor);

使用addColorStop可以添加一个颜色节点

  • 第一个参数是0-1之间的一个数值,这个数值指定该颜色进入渐变多长的距离
  • 第二个参数是颜色值

径向渐变

径向渐变是一种圆形的颜色扩展模式,颜色从圆心位置开始向外辐射。

一个径向渐变于两个圆形来定义。每一个圆都有一个圆心和一条半径。

语法

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

使用createRadialGradient可以创建一个径向渐变,(x1, y1, r1)和(x2, y2, r2)分别为两个圆的圆心坐标和半径。

let x1 = 100;   // 第一个圆圆心的X坐标
let y1 = 100;   // 第一个圆圆心的Y坐标
let r1 = 30;    // 第一个圆的半径
let x2 = 100;   // 第二个圆圆心的X坐标
let y2 = 100;   // 第二个圆圆心的Y坐标
let r2 = 100;   // 第二个圆的半径
let radialGradient1 = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0, 'rgb(0, 0, 255)');
radialGradient1.addColorStop(1, 'rgb(0, 255, 0)');
ctx.fillStyle = radialGradient1
ctx.fillRect(10, 10, 200, 200);

addColorStop的用法同线性渐变。

如果两个圆形的圆心位置相同,那么径向渐变将是一个完整的圆形。如果两个圆的圆心位置不相同,那么径向渐变看起来就像是一个探照灯发出的光线。如:

let x1 = 100;   // 第一个圆圆心的X坐标
let y1 = 100;   // 第一个圆圆心的Y坐标
let r1 = 30;    // 第一个圆的半径
let x2 = 150;   // 第二个圆圆心的X坐标
let y2 = 120;   // 第二个圆圆心的Y坐标
let r2 = 100;   // 第二个圆的半径
let radialGradient1 = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0, 'rgb(0, 0, 255)');
radialGradient1.addColorStop(1, 'rgb(0, 255, 0)');
ctx.fillStyle = radialGradient1
ctx.fillRect(10, 10, 200, 200);

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress