在JavaScript中組合RGB顏色值以形成混合

因此，在JavaScript中，如果我有紅色和綠色的百分比，例如35％是紅色，65％是綠色，我該如何組合它們？我對這個術語並不完全確定，它可能比我想象的要簡單。我在http://www.rapidtables.com/web/color/RGB_Color.htm 上看到它們的值在0-255之間。爲紅色和綠色混合分配0-255的值是否容易？如果它不是難以置信的不同，是否加入阿爾法混合工作呢？在JavaScript中組合RGB顏色值以形成混合

我希望顏色能夠顯示在畫布上，但一旦我有了混合值，這應該可以正常工作。所以我需要一個可以放入fillStyle的合法值。

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

來源

2015-11-15 Raven

對於每種顏色，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>

來源

2015-11-15 18:31:11 Berendschot

但我將如何把它變成可以被解釋爲某種顏色的工作價值？ – Raven

@Raven，現在給出一個例子。 – Berendschot

太棒了，這適用於我所需要的並且非常容易理解。 – Raven

在JavaScript中組合RGB顏色值以形成混合

回答

相關問題