学习笔记-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);