事实上， colored颜色 混合是因为它的透明度.我认为避免这种效果是不可能的，因为在rgba中有一个透明通道的唯一原因是允许"前景"和"背景" colored颜色 的混合.
事实上，rgba不应该提供比rgb更多的 colored颜色 .
在chart.js背景中使用rgba可以获得漂亮的 colored颜色 ，这是将该 colored颜色 的rgb部分作为"前景"与通常为白色(rgb(255, 255, 255))的图表背景相结合的结果.所得到的RGB混合的分量可以用以下公式计算
rMix = Math.round(r * a + 255 * (1 - a))
gMix = Math.round(g * a + 255 * (1 - a))
bMix = Math.round(b * a + 255 * (1 - a))
下面是执行该计算代码片段
function runColors() {
const ctxRgba = document.querySelector('#cvs_rgba').getContext('2d'),
ctxRgb = document.querySelector('#cvs_rgb').getContext('2d'),
textRgba = document.querySelector('#rgba'),
textRgb = document.querySelector('#rgb');
textRgba.innerText = '';
textRgb.innerText = '';
ctxRgba.fillStyle = 'rgb(255,255,255)';
ctxRgba.fillRect(0, 0, 300, 150);
ctxRgb.fillStyle = 'rgb(255,255,255)';
ctxRgb.fillRect(0, 0, 300, 150);
const r = parseInt(document.querySelector('#r').value, 10),
g = parseInt(document.querySelector('#g').value, 10),
b = parseInt(document.querySelector('#b').value, 10),
a = parseFloat(document.querySelector('#a').value);
if (r < 0 || r > 255 || b < 0 || b > 255 || g < 0 || g > 255 || a < 0 || a > 1) {
document.querySelector('#error').innerText = 'Invalid data';
return;
}
document.querySelector('#error').innerText = '';
const sRGBA = `rgba(${r},${g},${b},${a.toFixed(4).replace(/0+$/, '')})`;
textRgba.innerText = sRGBA;
const r1 = Math.round(r * a + 255 * (1 - a)),
b1 = Math.round(b * a + 255 * (1 - a)),
g1 = Math.round(g * a + 255 * (1 - a));
const sRGB = `rgb(${r1},${g1},${b1})`;
textRgb.innerText = sRGB;
ctxRgba.fillStyle = sRGBA;
ctxRgba.fillRect(0, 0, 300, 150);
ctxRgb.fillStyle = sRGB;
ctxRgb.fillRect(0, 0, 300, 150);
}
runColors();
<body>
<h3>
<code>rgb</code> result of mixing an <code>rgba</code> color with a white background
</h3>
R:<input type="text" size="3" value="0" id="r" onchange="runColors()"> G:
<input type="text" size="3" value="12" id="g" onchange="runColors()"> B:
<input type="text" size="3" value="137" id="b" onchange="runColors()"> A:
<input type="text" size="5" value="0.4" id="a" onchange="runColors()">
<div id="error" style="color:red"></div>
<div style="display: inline-block; border:1px solid black">
<canvas id="cvs_rgba" style="width: 200px; height: 50px;background-color: rgb(255, 255, 255)"></canvas>
<br>
<code id="rgba"></code>
</div>
<div style="display: inline-block; border:1px solid black">
<canvas id="cvs_rgb" style="width: 200px; height: 50px;background-color: rgb(255, 255, 255)"></canvas>
<br>
<code id="rgb"></code>
</div>
也是jsFiddle分.
Addendum
注:我必须补充我对广域色彩主题的理论知识，因为它与所提出的问题间接相关；然而，这只是抽象的信息，因为我从未使用过这些色彩空间，也没有HDR显示器.如果您知道更多信息，请为此(消息/新答案/编辑/否决)做出贡献.
令人担忧的是，比rgb(24)更宽的 colored颜色 空间，这是一个很大的话题，但值得一提的是，(在发布时，2023年底)浏览器已经对它提供了很好的支持.你可以从简单但很好的介绍开始，比如this one，或者阅读css4和githb canvas-color-space pages中的规格.
一个简单的测试显示，如果使用backgroundColor: "color(display-p3 0 1 0)"，但将该 colored颜色 传递给画布函数，则chart.js不会出现错误.这意味着可以为chart.js编写宽域就绪代码.然而，在代码中创建画布上下文的方式似乎表明，用户目前无法设置 colored颜色 空间，即使将CanvasRenderingContext2d作为第一个参数传递给Chart构造函数也是如此.
