Question

所以，在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();

Answer 1

对于每种颜色，RGB（红色，绿色，蓝色）确实具有0-255的值。所以我假设转换该范围内的值的百分比应该可以正常工作吗？

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

color = (percentage / 100.00) * 255.00

示例摘录

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: