canvas 中有哪些渐变类型

在 HTML5 的 canvas 绘图环境中，渐变是一项强大且实用的功能，它能够为图形添加丰富的视觉效果。canvas 主要支持两种渐变类型：线性渐变（Linear Gradient）和径向渐变（Radial Gradient）。

线性渐变是沿着一条直线创建颜色过渡的效果。通过 createLinearGradient() 方法来创建线性渐变对象。在使用这个方法时，需要定义渐变的起点和终点坐标。例如：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var linGrad = ctx.createLinearGradient(0, 0, 100, 100);
linGrad.addColorStop(0, 'blue');
linGrad.addColorStop(1,'red');
ctx.fillStyle = linGrad;
ctx.fillRect(0, 0, 100, 100);

上述代码创建了一个从画布左上角（0, 0）到右下角（100, 100）的线性渐变，起始颜色为蓝色，结束颜色为红色。addColorStop() 方法用于指定渐变过程中的颜色变化点，参数第一个是 0 到 1 之间的位置值，第二个是颜色值。

径向渐变则是创建从一个中心点向四周辐射的渐变效果。使用 createRadialGradient() 方法来生成径向渐变对象，这个方法需要定义两个圆的参数，即起始圆和结束圆的圆心坐标以及半径。示例代码如下：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var radGrad = ctx.createRadialGradient(50, 50, 10, 50, 50, 50);
radGrad.addColorStop(0, 'yellow');
radGrad.addColorStop(1, 'green');
ctx.fillStyle = radGrad;
ctx.fillRect(0, 0, 100, 100);

这里创建了一个以（50, 50）为中心，起始圆半径为 10，结束圆半径为 50 的径向渐变，颜色从黄色过渡到绿色。

线性渐变和径向渐变极大地丰富了 canvas 的绘图表现力。开发者可以利用它们为图形、文字等元素添加独特的色彩过渡效果，无论是制作简单的界面元素，还是绘制复杂的艺术作品，这两种渐变类型都能发挥重要作用。掌握它们的使用方法，能让我们在 canvas 的世界中创造出更加绚丽多彩的视觉内容。