Color

Namespace

Entity of Color module is located in the global.WebModule.Color.
If you want publish to global namespace.

Color モジュールの実体は、global.WebModule.Color にあります。
global 名前空間に直接公開する事もできます。その場合は global.Color でもアクセスできます。

API

Color methods
- new Color - 新しいColorインスタンスを生成します
- Color#toString - 色文字列を取得します
- Color#RGBA - RGBA の配列を取得します
- Color#HSLA - HSLA の配列を取得します
- Color#HSVA - HSVA の配列を取得します
- Color#YUVA - YUVA の配列を取得します
- Color#R - 赤を 0 - 255 で取得します
- Color#r - 赤を 0.0 - 1.0 で取得します
- Color#G - 緑を 0 - 255 で取得します
- Color#g - 緑を 0.0 - 1.0 で取得します
- Color#B - 青を 0 - 255 で取得します
- Color#b - 青を 0.0 - 1.0 で取得します
- Color#A - 透明度を 0 - 255 で取得します
- Color#a - 透明度を 0.0 - 1.0 で取得します
Convert functions
- Color.RGBA_HSLA - RGBAの配列をHSLAの配列に変換します
- Color.HSLA_RGBA - HSLAの配列をRGBAの配列に変換します
- Color.RGBA_HSVA - RGBAの配列をHSVAの配列に変換します
- Color.HSVA_RGBA - HSVAの配列をRGBAの配列に変換します
- Color.RGBA_YUVA - RGBAの配列をYUVAの配列に変換します
- Color.YUVA_RGBA - YUVAの配列をRGBAの配列に変換します
Effect functions
- Color.reverse - 反転色を作ります
- Color.effect - HSLAで色味を調整します
- Color.sepia - セピアカラーにします
- Color.gray - グレースケールにします

new Color

value には色を指定します
value を色として解釈できない場合は、透明な黒(transparent)が指定されたものとして動作します

var R = 255;
var G = 128;
var B = 0;
var A = 128; // 0.5

new Color();
new Color(new Color("transparent")); // コピーコンストラクタ
new Color("red");
new Color("#ff0000");
new Color("rgb(255,0,0)");
new Color("rgba(255,0,0,1.0)");
new Color("hsl(360,100,100)");
new Color("hsla(360,100,100,1.0)");
new Color("hsv(360,100,100)");
new Color("hsva(360,100,100,1.0)");
new Color([R, G, B, A]);
new Color(new Uint8Array([R, G, B, A]));
new Color(new Uint8ClampedArray([R, G, B, A]));
new Color(0xff0000);

Color.prototype.toString

Color#toString(format:String = "rgba"):String は色情報を文字列で返します。

format	result	example
"rgba"	"rgba(R,G,B,a)"	"rgba(255,0,0,0.5)"
"hsla"	"hsla(H,S,L,a)"	"hsla(0,100%,100%,0.5)"
"hsva"	"hsva(H,S,V,a)"	"hsva(0,100%,100%,0.5)"
"#rrggbb"	"#rrggbb"	"#ff0000"

R, G, B は 0〜255 の整数で、a は toFixed(2) した小数値(小数点2桁目を四捨五入した値)になります
H は 0〜359 の整数です
S, L, V は 0〜100 の整数に % が付いた値です
rr, gg, bb は 00〜ff の16進数値です

var color = new Color("red");

color.toString()          // -> "rgba(255,0,0,1.0)";
color.toString("#rrggbb") // -> "#ff0000"

Color.prototype.RGBA

Color#RGBA:Uint8ClampedArray は色情報をRGBAの配列で返す getter です。

R, G, B, A は 0〜255 の数値です

var color = new Color("red");

color.RGBA // -> [255, 0, 0, 255] [R, G, B, A]

Color.prototype.HSLA

Color#HSLA:Float32Array は色情報をhslAの配列で返す getter です。

h は 0〜359 の数値です
s は 0.0〜1.0 の数値です
l は 0.0〜1.0 の数値です
A は 0〜255 の数値です

var color = new Color("red");

color.HSLA // -> [0, 1, 0.5, 255] [h, s, l, A]

Color.prototype.HSVA

Color#HSVA:Float32Array は色情報をhsvAの配列で返す getter です。

h は 0〜359 の数値です
s は 0.0〜1.0 の数値です
v は 0.0〜1.0 の数値です
A は 0〜255 の数値です

var color = new Color("red");

color.HSVA // -> [0, 1, 1, 255] [h, s, v, A]

Color.prototype.YUVA

Color#YUVA:Float32Array は色情報をyuvAの配列で返す getter です。

y は 0.0〜1.0 の数値です
cb は -0.5〜+0.5 の数値です
cr は -0.5〜+0.5 の数値です
A は 0〜255 の数値です

var color = new Color("red");

color.YUVA // -> [0.29899999499320984, -0.16873599588871002, 0.5, 255] [y, cb, cr, A]

Color.prototype.R

Color#R:UINT8 は赤色を 0〜255 の値で返す getter です。
Color#r:UINT8 は赤色を 0.0〜1.0 の値で返す getter です。

var color = new Color("red");

color.R // -> 255
color.r // -> 1

Color.prototype.G

Color#G:UINT8 は緑色を 0〜255 の値で返す getter です。
Color#g:UINT8 は緑色を 0.0〜1.0 の値で返す getter です。

var color = new Color("lime");

color.G // -> 255
color.g // -> 1

Color.prototype.B

Color#B:UINT8 は青色を 0〜255 の値で返す getter です。
Color#b:UINT8 は青色を 0.0〜1.0 の値で返す getter です。

var color = new Color("blue");

color.B // -> 255
color.b // -> 1

Color.prototype.A

Color#A:UINT8 は透明度を 0〜255 の値で返す getter です。
Color#a:UINT8 は透明度を 0.0〜1.0 の値で返す getter です。

var color = new Color("blue");

color.A // -> 255
color.a // -> 1

Color.RGBA_HSLA

Color.HSLA_RGBA

Color.RGBA_HSLA(pixelData:NumberArray|Uint8Array|Uint8ClampedArray):Float32Array は、 [<R, G, B, A>, ...] の配列で指定された色情報を [<h, s, l, A>, ...] の配列に変換します。

Color.HSLA_RGBA(pixelData:NumberArray|Float32Array):Uint8ClampedArray は、 [<h, s, l, A>, ...] の配列で指定された色情報を [<R, G, B, A>, ...] の配列に変換します。

R, G, B, A は 0〜255 の数値です
h は 0〜359 の数値です
s は 0.0〜1.0 の数値です
l は 0.0〜1.0 の数値です

var pixelData = [255, 255, 255, 255,
                   0,   0,   0, 255,
                 255,   0,   0,   0]

Color.RGBA_HSLA(pixelData)
// -> [0, 0, 1, 255,
       0, 0, 0, 255,
       0, 1, 0.5, 0]

Color.HSLA_RGBA( Color.RGBA_HSLA(pixelData) )
// -> [255, 255, 255, 255,
         0,   0,   0, 255,
       255,   0,   0,   0]

Color.RGBA_HSVA

Color.HSVA_RGBA

Color.RGBA_HSVA(pixelData:NumberArray|Uint8Array|Uint8ClampedArray):Float32Array は、 [<R, G, B, A>, ...] の配列で指定された色情報を [<h, s, v, A>, ...] の配列に変換します。

Color.HSVA_RGBA(pixelData:NumberArray|Float32Array):Uint8ClampedArray は [<h, s, v, A>, ...] の配列で指定された色情報を [<R, G, B, A>, ...] の配列に変換します。

R, G, B, A は 0〜255 の数値です
h は 0〜359 の数値です
s は 0.0〜1.0 の数値です
v は 0.0〜1.0 の数値です

var pixelData = [255, 255, 255, 255,
                   0,   0,   0, 255,
                 255,   0,   0,   0]

Color.RGBA_HSVA(pixelData)
// -> [0, 0, 1, 255,
       0, 0, 0, 255,
       0, 1, 1, 0]

Color.HSVA_RGBA( Color.RGBA_HSVA(pixelData) )
// -> [255, 255, 255, 255,
         0,   0,   0, 255,
       255,   0,   0,   0]

Color.RGBA_YUVA

Color.YUVA_RGBA

Color.RGBA_YUVA(pixelData:NumberArray|Uint8Array|Uint8ClampedArray):Float32Array は、 [<R, G, B, A>, ...] の配列で指定された色情報を [<y, cb, cr, A>, ...] の配列に変換します。

Color.YUVA_RGBA(pixelData:NumberArray|Float32Array):Uint8ClampedArray は [<y, cb, cr, A>, ...] の配列で指定された色情報を [<R, G, B, A>, ...] の配列に変換します。

R, G, B, A は 0〜255 の数値です
y は 0.0〜1.0 の数値です
cb は -0.5〜+0.5 の数値です
cr は -0.5〜+0.5 の数値です

var pixelData = [255, 255, 255, 255,
                   0,   0,   0, 255,
                 255,   0,   0,   0]

Color.RGBA_YUVA(pixelData)
// -> [1, 0, 0, 255,
       0, 0, 0, 255,
       0.29899999499320984, -0.16873599588871002, 0.5, 0]

Color.YUVA_RGBA( Color.RGBA_YUVA(pixelData) )
// -> [255, 255, 255, 255,
         0,    0,  0, 255,
       255,    0,  0,   0]

Color.reverse

Color.reverse(pixelData:NumberArray|Uint8Array|Uint8ClampedArray):Uint8ClampedArray は [<R, G, B, A>, ...] の配列で指定された色情報の R, G, B 成分それぞれを反転させた新しい配列を返します

反転後の値は、[R ^ 255, G ^ 255, B ^ 255, A, ...] の結果になります。A の値はそのまま格納されています。

var pixelData = [255, 255, 255, 255,
                   0,   0,   0, 255,
                 255,   0,   0,   0]

Color.reverse(pixelData)
// -> [  0,   0,   0, 255,
       255, 255, 255, 255,
         0, 255, 255,   0]

Color.effect

Color.effect(pixelData:NumberArray|Uint8Array|Uint8ClampedArray, hslA:NumberArray|Float32Array):Uint8ClampedArray は pixelData([<R, G, B, A>, ...]) を hslA の値で可変した新しい配列を返します。

hslA には以下の値を指定できます。

h は -359 〜 +359 の数値です
s は -1.0 〜 +1.0 の数値です
l は -1.0 〜 +1.0 の数値です
A は -255 〜 +255 の数値です

var pixelData = [255, 255, 255, 255,
                   0,   0,   0, 255,
                 255,   0,   0,   0]

var hslA = [180, 0.5, 0.5, 0.5]

Color.effect(pixelData, hslA)
// -> [255, 255, 255, 255,
        64, 191, 191, 255,
       255, 255, 255, 0]

Color.sepia

Color.sepia(pixelData:NumberArray|Uint8Array|Uint8ClampedArray, cb:Number = -0.0911, cr:Number = 0.056):Uint8ClampedArray は pixelData([<R, G, B, A>, ...]) をセピアカラーに変化させた新しい配列を返します。

var pixelData = [255, 255, 255, 255,
                   0,   0,   0, 255,
                 255,   0,   0,   0]

Color.sepia(pixelData)
// -> [255, 253, 214, 255,
        20,   0,   0, 255,
        96,  74,  35,   0]

Color.gray

Color.gray(pixelData:NumberArray|Uint8Array|Uint8ClampedArray):Uint8ClampedArray は pixelData([<R, G, B, A>, ...]) をモノトーンカラーに変化させた新しい配列を返します。

var pixelData = [255, 255, 255, 255,
                   0,   0,   0, 255,
                 255,   0,   0,   0]

Color.gray(pixelData)
// -> [255, 255, 255, 255,
         0,   0,   0, 255,
         0,   0,   0,   0]

Spec

API Spec

Provide feedback

Saved searches

Use saved searches to filter your results more quickly