0

我正在尝试使用 HTML5 画布，我想从我的 CSS 中获取 fillStyle 的颜色，但也需要一些透明度。当我使用 jQuery 读取 CSS 样式时，返回的是 rgb 值而不是十六进制。

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

起初看起来我不需要再次转换它对我来说很方便，但我发现我无法将 alpha 添加到 RGB 值，所以我必须将其转换为 Hex，然后将其转换为带有 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;
}

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

4

1 回答 1

0

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

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

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

var alpha = fillOpacity * 255;

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

编辑：

我应该提到 HTML5 画布元素可以有效地与位图一起使用，所以虽然你可以做一些组合位和鲍勃，所以没有图层的直接概念，因为你不能（据我所知）告诉画布元素是 r,g,b,a 因为它下面没有什么可以结合的。当然，除非您尝试在某种形式的背景图像上放置半透明画布。或者，通过与原始 CSS 颜色进行多重混合来组合底层图像，以在图像上实现半透明层的效果。

于 2012-03-27T20:41:41.170 回答