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

Question

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

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

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

Answer 1

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

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

color = (percentage / 100.00) * 255.00

示例片段

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>

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

Combine RGB color values in JavaScript to form a blend

javascript

colors

rgba