🎨
JavascriptでRGBAの値を変更する
文字形式のRGBAの値を変える関数
"rgba(R, G, B, A)"という形のrgbaの文字列を入れて、RGBAの値を変更して同じ形の文字列で返してくれる。
function changeColorRGBA (rgbaStr, r=null, g=null, b=null, a=null) {
//strを配列に分割 例えば"rgba(201, 203, 207, 0.4)"を[ 201, 203, 207, 0.4 ]にする
rgba = rgbaStr.split('(')[1]
rgba = rgba.split(')')[0]
rgba = rgba.split(",")
rgba = rgba.map(Number)
//rgbaの各値に代入。
rgba[0] = r!=null ? r : rgba[0]
rgba[1] = g!=null ? g : rgba[1]
rgba[2] = b!=null ? b : rgba[2]
rgba[3] = a!=null ? a : rgba[3]
rgbaStrNew = "rgba("+rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")"
return rgbaStrNew
}
デモ
値を変化させない場合は、引数にundefinedを入れる。
例えば、
r=10, a=0.3に変化させたい場合は以下のように使用。
rgbaStr = "rgba(201, 203, 207, 0.4)"
rgbaStrNew = changeColor(rgbaStr,10,undefined,undefined,0.3)
console.log(rgbaStrNew)
結果
rgba(10, 203, 207, 0.3)
使い道
色々あると思いますが、僕はChart.jsで使うために使用した。
誰かのお役に立てれば。
Discussion