携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情 >>

canvas设置渐变的两种方式：

createLinearGradient(x,y,x1,y1) ： 创建线条渐变

createRadialGradient(x,y,r,x1,y1,r1) ： 创建一个径向/圆渐变

在线试一试

createLinearGradient(x,y,x1,y1)

• x：渐变开始点的 x 坐标
• y：渐变开始点的 y 坐标
• x1：渐变结束点的 x 坐标
• y1：渐变结束点的 y 坐标

代码如下：

const c = document.getElementById("myCanvas");

const ctx = c.getContext("2d");

// 创建渐变

const grd1 = ctx.createLinearGradient(0, 0, 200, 0);

grd1.addColorStop(0, "green");

grd1.addColorStop(1, "white");

// 填充渐变

ctx.fillStyle = grd1;

ctx.fillRect(10, 10, 150, 80);

createRadialGradient(x,y,r,x1,y1,r1)

• x：渐变的开始圆的 x 坐标

• y：渐变的开始圆的 y 坐标

• r：开始圆的半径

• x1：渐变的结束圆的 x 坐标

• y1：渐变的结束圆的 y 坐标

• r1：结束圆的半径

代码如下：

const grd2 = ctx.createRadialGradient(75, 140, 15, 90, 120, 100);

grd2.addColorStop(0, "red");

grd2.addColorStop(1, "white");

// 填充渐变

ctx.fillStyle = grd2;

ctx.fillRect(10, 100, 150, 80);