Canvas 设置渐变色文字（线性、径向）

引言

在Web开发中，Canvas 提供了强大的功能来绘制图形和图像，同时也允许开发者使用复杂的颜色填充，如渐变色。本文将详细介绍如何在 Canvas 中使用线性和径向渐变来渲染文字，从而创造出引人注目的视觉效果。

基本概念与作用

在 Canvas 中，渐变可以通过 createLinearGradient() 和 createRadialGradient() 方法创建。这两种渐变类型都可以用来填充形状，包括文字。通过调整渐变的起点、终点和颜色停靠点，我们可以创建出丰富多彩的文字效果。

线性渐变

线性渐变沿着一条直线方向变化颜色。

径向渐变

径向渐变从一个中心点开始，沿半径向外扩展变化颜色。

示例一：线性渐变文字

代码示例

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 创建线性渐变
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'blue');
gradient.addColorStop(1, 'green');

// 设置渐变色作为填充文字的颜色
ctx.fillStyle = gradient;

// 设置文字样式
ctx.font = 'bold 48px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// 绘制文字
ctx.fillText('Hello Canvas!', canvas.width / 2, canvas.height / 2);

代码解析

• 创建一个从左至右的线性渐变，颜色从红到蓝再到绿。
• 设置渐变色作为填充文字的颜色。
• 设置文字样式，包括字体大小、对齐方式和基线位置。
• 在画布中心绘制带有渐变色的文字。

示例二：径向渐变文字

代码示例

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 创建径向渐变
const gradient = ctx.createRadialGradient(
  canvas.width / 2, canvas.height / 2, 0,
  canvas.width / 2, canvas.height / 2, canvas.width / 2
);
gradient.addColorStop(0,