HTML Canvas 渐变
画布 - 渐变
渐变可用于填充矩形、圆形、线条、文本等。画布上的形状并不限于纯色。
有两种不同类型的渐变：
- createLinearGradient(x,y,x1,y1) - 创建线性渐变
- createRadialGradient(x,y,r,x1,y1,r1) - 创建径向/圆形渐变
一旦我们有了渐变对象，就必须添加两个或更多色标。
addColorStop() 方法规定颜色的停止点及其沿渐变的位置。渐变位置可以是 0 到 1 之间的任意位置。
要使用渐变，请将 fillStyle 或 strokeStyle 属性设置为渐变，然后绘制形状（矩形、文本或线条）。
Canvas - Gradients使用 createLinearGradient()
实例
创建线性渐变。用渐变填充矩形：
JavaScript:
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
使用 createRadialGradient():
实例
创建径向/圆形渐变。用渐变填充矩形：
JavaScript:
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// 创建渐变
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);