將RGB轉換爲RGBA

我正在嘗試使用HTML5畫布，並且我想從我的CSS中獲取fillStyle的顏色，但也使用了一些透明度。當我使用jQuery讀取CSS樣式時，會返回rgb值而不是十六進制。將RGB轉換爲RGBA

fillColor = $(".myClass").css("background-color"); // return rgb(x, x, x)

起初它看起來是方便易，我認爲我不需要再次轉換，但我發現我不能阿爾法添加到RGB值，所以我必須把它轉換成十六進制，然後將其轉換爲帶有alpha值的RGBA。

function convertHexToRGB(hex) 
{ 
    var red = hex.substr(1, 2), green = hex.substr(3, 2), blue = hex.substr(5, 2), alpha = arguments[1]; 
    color = "rgba(" + parseInt(red, 16) + "," + parseInt(green, 16) + "," + parseInt(blue, 16) + "," + alpha + ")"; 
    return color; 
}

現在，我的代碼看起來很臭，效率低下，有沒有辦法給RGB值添加一個alpha值。或者一些將RGB轉換爲RGBA的功能？

來源

2012-03-27 Ian Hsieh

你不能只是從你的CSS檢索不透明度值是這樣的：

fillOpacity = $(".myClass").css("opacity"); // return 0.x

然後將不透明度值轉換成你所需要的「A」通道：

var alpha = fillOpacity * 255;

然後追加到你的rgb值（int形式）？

編輯：

我應該指出，HTML5的畫布元素與位圖有效地工作，以便同時你可以做一些組合位和羈絆，所以層沒有直接的概念，你不能（據我所知）告訴一個畫布元素是r，g，b，a，因爲沒有任何東西可以與下面的元素結合。除非你正試圖在某種形式的背景圖像上放置半透明畫布。或者，通過比方說，將原始CSS顏色與基本圖像進行多重混合來實現半透明圖層對圖像的影響。

來源

2012-03-27 20:41:41 dougajmcdonald

這是我在做什麼，我有一個覆蓋畫布，用半透明的填充區域突出的背景圖像的特定區域。不透明值僅用於畫布，不用於CSS。無論如何，我需要的是將Alpha值添加到存在的RGB值。不檢索Alpha值。 – 2012-03-28 22:11:21

將RGB轉換爲RGBA

回答

相關問題