在 JavaScript 中组合 RGB 颜色值以形成混合

【问题标题】：Combine RGB color values in JavaScript to form a blend在 JavaScript 中组合 RGB 颜色值以形成混合
【发布时间】：2015-11-15 18:27:34
【问题描述】：

那么，在 JavaScript 中，如果我有一定比例的红色和绿色，比如 35% 的红色和 65% 的绿色，我该如何组合它们？我不完全确定这个术语，它可能比我想象的要简单。我在http://www.rapidtables.com/web/color/RGB_Color.htm 上看到了它们的值范围为 0-255。为红色和绿色混合分配一个 0-255 的值是否容易？如果没有令人难以置信的不同，那么在混合中添加 alpha 是否也有效？

我希望颜色能够显示在画布中，但是一旦我有了混合值，这应该可以正常工作。所以我需要一个可以放入 fillStyle 的合法值。

var c=document.getElementById("myCanvas");
ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.fillStyle="the blended color";
ctx.fill();

【问题讨论】：

标签： javascript colors rgba

【解决方案1】：

RGB（红、绿、蓝）每种颜色的值确实在 0-255 之间。所以我假设将百分比转换为该范围内的值应该可以正常工作？

当您为每种颜色执行以下代码时，您可以组合所有值以获得 RGB 值。

color = (percentage / 100.00) * 255.00

示例 sn-p

function percentageToRGB(r,g,b) {
    var r = parseInt((r/100)*255);
    var g = parseInt((g/100)*255);
    var b = parseInt((b/100)*255);
    
    return "rgb("+ r +","+ g +","+ b +")";
}

document.getElementById("block").style.background = percentageToRGB(35, 65, 0);

#block {
    width: 200px;
    height: 100px;
    text-align: center;
    border: 1px solid black;
    line-height: 100px;
}

<div id="block">
    Hello
</div>

【讨论】：

但是我怎样才能把它变成一个可以解释为颜色的工作值呢？
@Raven，现在给出一个例子。
太好了，这可以满足我的需要并且非常容易理解。