Firefox中Canvas的createConicGradient()颜色褪色问题

问题情况 #

使用ctx.createConicGradient()实现圆锥渐变时，Firefox中会出现颜色饱和度过低、呈现褪色发灰的状态，相同代码在Chrome中显示完全正常。而ctx.createLinearGradient()、ctx.createRadialGradient()等其他渐变方法，在两款浏览器中均能正常工作。

Firefox中的显示效果：

Chrome中的显示效果：

该问题在Firefox开发者版、Nightly版本中均存在，调整gfx.color_management.mode和gfx.color_management.enablev4等颜色管理设置并重启浏览器后，仍无法解决。多次重复应用同一渐变会略微加深颜色，但效果有限，推测问题与Firefox处理圆锥渐变的alpha通道或透明度逻辑有关。

可行的原生解决方案 #

1. 给渐变颜色显式指定alpha=1 #

添加颜色停止点时，改用rgba格式明确将透明度设置为1，强制Firefox使用完全不透明的颜色：

const gradient = ctx.createConicGradient(0, 100, 100);
// 每个颜色都显式设置alpha为1
gradient.addColorStop(0, 'rgba(255, 0, 0, 1)');
gradient.addColorStop(0.25, 'rgba(0, 255, 0, 1)');
gradient.addColorStop(0.5, 'rgba(0, 0, 255, 1)');
gradient.addColorStop(0.75, 'rgba(255, 255, 0, 1)');
gradient.addColorStop(1, 'rgba(255, 0, 0, 1)');

这种方式可以避免Firefox默认处理时隐式引入透明度，从而解决褪色问题。

2. 通过合成模式增强颜色饱和度 #

绘制渐变前，将画布的合成模式设置为multiply，绘制完成后恢复默认值，依靠合成模式加深颜色：

ctx.save();
ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();

该方法无需修改渐变本身的定义，直接通过绘制模式调整饱和度，效果直观。

3. 向Firefox官方反馈bug #

这是Firefox的兼容性问题，你可以前往Firefox的Bugzilla平台提交复现案例，帮助官方修复。提交时需包含：

• 能复现问题的最简代码片段
• 你的Firefox版本信息
• 颜色管理设置的相关截图

说明 #

以上方案均基于原生API实现，无需使用polyfill。如果上述方法仍无法满足需求，可暂时使用圆锥渐变的polyfill作为过渡，但优先推荐原生解决方案。

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