如何在Canvas中创建从外到内的径向渐变？

没问题！看你描述的需求，你想要的是圆形区域内呈现非径向的渐变效果（比如从一侧到另一侧的色彩过渡），这个其实很好实现，给你两种靠谱的方案：

方案一：线性渐变 + 圆形裁剪（最直观） #

这个思路是先定义一个线性渐变，然后通过裁剪功能让渐变只在圆形范围内显示，完全适配你要的效果。

示例代码（Canvas实现） #

先准备Canvas元素：

<canvas id="gradientCircle" width="200" height="200"></canvas>

然后编写JS逻辑：

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

// 1. 创建线性渐变，可自由调整方向
// 参数依次是：渐变起点x、起点y、终点x、终点y
const gradient = ctx.createLinearGradient(50, 100, 150, 100);
// 添加颜色节点，0对应起点，1对应终点，中间可以加多个节点
gradient.addColorStop(0, '#ff7f50');
gradient.addColorStop(0.5, '#ffffff');
gradient.addColorStop(1, '#1e90ff');

// 2. 绘制圆形路径并设置裁剪范围
ctx.beginPath();
// 圆心坐标(100,100)，半径80
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.clip(); // 后续所有绘制都会被限制在这个圆形内

// 3. 用渐变填充整个裁剪区域
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

如果想调整渐变方向，只需要修改createLinearGradient的四个参数：

• 从上到下渐变：createLinearGradient(100, 50, 100, 150)
• 斜向渐变：createLinearGradient(50, 50, 150, 150)

方案二：调整径向渐变参数（模拟线性过渡） #

如果你想用径向渐变来实现类似效果，可以通过设置两个不同位置的圆心，让渐变呈现出“从一侧到另一侧”的过渡感：

示例代码 #

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

// 创建径向渐变：内圆心坐标、内半径、外圆心坐标、外半径
const radialGradient = ctx.createRadialGradient(50, 100, 0, 150, 100, 80);
radialGradient.addColorStop(0, '#ff7f50');
radialGradient.addColorStop(0.5, '#ffffff');
radialGradient.addColorStop(1, '#1e90ff');

// 直接绘制圆形并填充渐变
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.fillStyle = radialGradient;
ctx.fill();

这个方案的渐变过渡会比线性渐变更柔和一点，你可以根据自己的视觉需求选择。

内容的提问来源于stack exchange，提问作者Vexator