2012-03-27 4 views
0

나는 HTML5 캔버스로 게임을하고 있는데, 필자의 CSS에서 fillStyle의 색상을 얻고 싶지만 투명성도있다. jQuery를 사용하여 CSS 스타일을 읽을 때 16 진수 대신 rgb 값이 반환됩니다.RGB를 RGBA로 변환

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

먼저는 내가 다시 변환 할 필요가 없습니다 나에게 convinient, 그러나 나는 내가 RGB 값으로 알파를 추가 할 수 없습니다 것을 발견, 그래서 다음 16 진수로 변환해야 볼에서 알파 값으로 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로 변환하는 일부 기능은 무엇입니까?

답변

0

당신은이처럼 CSS에서 불투명도 값을 검색 할 수 없습니다 : 다음

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

그리고 당신이 필요로하는 'A'채널로 불투명도 값을 변환 :

var alpha = fillOpacity * 255; 

그리고 그 값을 당신에게 rgb 값 (int 형태로)에 추가 하시겠습니까?

편집 :

난 당신이 어떤 조합의 소품류를 할 수있는 동안 있도록 HTML5 캔버스 요소가 효과적으로 비트 맵 작동하는지 언급해야한다, 그래서 레이어의 직접적인 개념이 점에서,이없는

당신 할 수 없습니다 (내가 아는 한) 캔버스 요소에 r, g, b, a가 있다고 말할 수 있습니다. 왜냐하면 캔버스 요소는 밑에 결합 할 것이 없기 때문입니다. 물론 어떤 형태의 배경 이미지 위에 반투명 캔버스를 놓으려고하지 않는 한. 또는 이미지 위에 반투명 레이어의 영향을주기 위해 원본 CSS 색상과 블렌딩을 곱하면 말한 기본 이미지를 결합 할 수 있습니다.

+0

정확히 내가하고있는 것, 배경 이미지의 특정 영역을 강조 표시하기 위해 반투명 채우기 영역이있는 오버레이 캔버스가 있습니다. 불투명 한 값은 캔버스에서만 사용되며 CSS에서는 사용되지 않습니다. 어쨌든, 내가 필요로하는 것은 존재하는 RGB 값에 알파 값을 더하는 것입니다. 알파 값을 검색하지 않습니다. –