Конвертировать RGB в RGBA - PullRequest
Новая
       96

Конвертировать RGB в RGBA

0 голосов
/ 28 марта 2012

Я пытаюсь поиграть с HTML5 canvas и хочу получить цвет fillStyle прямо из моего CSS, но также и с некоторой прозрачностью.Когда я использую jQuery для чтения стиля CSS, вместо шестнадцатеричного значения возвращается значение rgb.

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

Поначалу мне кажется, что мне не нужно снова преобразовывать его, но я обнаружил, что не могу добавить альфа к значению RGB, поэтому мне нужно преобразовать его в шестнадцатеричное, а затем преобразовать его в 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.Или какая-то функция, которая конвертирует RGB в RGBA?

1 Ответ

0 голосов
/ 28 марта 2012

Не могли бы вы просто получить значение непрозрачности из вашего CSS следующим образом: 

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

А затем переведите значение непрозрачности в нужный вам канал 'A': 

var alpha = fillOpacity * 255;

А потом добавить, что вам значение rgb (в виде int)?

EDIT:

Я должен упомянуть, что элемент холста HTML5 эффективно работает с растровыми изображениями, поэтому вы можете создавать несколько комбинированных битов и бобов, поэтому нет прямой концепции слоев, которую вы не можете (насколько я знаю) скажите элемент холста как r, g, b, a, потому что ему нечего объединить с нижним. Если, конечно, вы не пытаетесь поместить полупрозрачный холст поверх фонового изображения какой-либо формы. Или объедините базовое изображение, скажем, с помощью умножения наложения с вашим исходным цветом CSS, чтобы добиться эффекта полупрозрачного слоя над изображением.

...