Question

我正在尝试使用HTML5画布，我希望从我的CSS中获得fillStyle的颜色，但也有一些透明度。当我使用jQuery读取CSS样式时，返回rgb值而不是hex。

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

起初它看起来很方便我不需要再次转换它，但我发现我无法将alpha添加到RGB值，所以我必须将其转换为Hex，然后将其转换为RGBA带有alpha值。

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

现在让我的代码看起来很臭，效率低，有没有办法将alpha值添加到RGB值。或者某些将RGB转换为RGBA的函数？

Answer 1

你难道不能像这样从你的CSS中检索不透明度值：

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

然后将不透明度值转换为您需要的“A”频道：

var alpha = fillOpacity * 255;

然后将它附加到你的rgb值（以int形式）？

修改

我应该提到HTML5 canvas元素可以有效地使用位图，所以你可以做一些组合位和bobs，所以没有层的直接概念，因为你不能（据我所知）告诉画布元素是r，g，b，a因为它没有任何东西可以与下面结合。当然，除非您尝试将半透明画布放在某种形式的背景图像上。或者，将底层图像组合起来，例如，与原始CSS颜色相乘，以实现半透明层对图像的影响。

将RGB转换为RGBA

1 个答案: