颜色矩阵Color Matrix的具体用法

最近在做滤镜效果,整理了一下颜色矩阵的用法,如下:
//tint
var tcolor = {r: 0, g: 153, b: 255};
var tr = tcolor.r / 255;
var tg = tcolor.g * 2 / 255;
var tb = tcolor.b * 2 / 255;

// var R1 = tr * (0.2126*R + 0.7152*G + 0.0722*B)
// var G1 = tg * (0.2126*R + 0.7152*G + 0.0722*B)
// var B1 = tb * (0.2126*R + 0.7152*G + 0.0722*B)

var strong = 1;
var tintMatrix = [
tr, 0, 0, 0,
0, tg, 0, 0,
0, 0, tb, 0,
0, 0, 0, 1
];

var lr = 0.2126;
var lg = 0.7152;
var lb = 0.0722;
var tintGrayMatrix = [
lr, lg, lb, 0,
lr, lg, lb, 0,
lr, lg, lb, 0,
0, 0, 0, 1
];

//resultMatrix是tint和tingGray的乘积,还没写完
var resultMatrix=[
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1

];

//alpha 0 to 1
var alphaK = 0.1;
var alphaMatrix = [
alphaK, 0, 0, 0,
0, alphaK, 0, 0,
0, 0, alphaK, 0,
0, 0, 0, alphaK
];

//brightness -1 to 1
var bright = -0.8;
var b1 = (bright <= 0) ? 1 + bright : 1; var b2 = (bright > 0) ? bright : 0;
var brightnessMatrix = [
b1, 0, 0, 0,
0, b1, 0, 0,
0, 0, b1, 0,
b2, b2, b2, 1
];

//gray
var strong = -0.5;
var grayMatrix = [
0.3086, 0.3086, 0.3086, 0,
0.6094, 0.6094, 0.6094, 0,
0.0820, 0.0820, 0.0820, 0,
strong, strong, strong, 1
];

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *