首页 > 代码库 > 动画原理——颜色值处理

动画原理——颜色值处理

2024-11-14 11:10:39   203人阅读

1.使用十六进制的颜色

有时候所提供颜色值的格式并不是你需要的，这时就需要进行转化。

//转为16进制颜色属性var hexColor = ‘#‘ + (16733683).toString(16);console.log(hexColor);//转为10进制数字var color = window.parseInt(hexColor.slice(1), 16);console.log(color);

2.颜色合成

三原色红绿蓝，当我们想要获取紫色时，可以用红0xFF (255)，绿0x55(decimal 55)，蓝0xF3 (decimal 243)混合得到。但注意得到的结果是10进制的，需要转化才可以使用代码计算如下：

var color = 0xFF << 16 | 0x55 << 8 | 0xF3;

3.颜色提取

当你拥有一个颜色时，你想分解出三个基本色的色值，可以使用&，当对应位两个都为1结果才为1。

因为&的是在二进制下运算的。上述紫色的二进制为111111110101010111110011，从前到后，每8个二进制依次表示红绿蓝的色值，现在我们想获得蓝的色值。可以这样计算

111111110101010111110011 进行&运算

000000000000000011111111

代码是：

console.log(16733683&0x0000FF)

4.使用带透明度的颜色属性

这个比较麻烦，不再可以简单的#加色值，而是要构建这样的字符串"rgba(R, G, B, A)"，代码如下。

var r = 0xFF, g = 0x55, b = 0xF3, a = 0.2, color = "rgba(" + r + "," + g + "," + b + "," + a + ")";console.log(color);

5.颜色工具

colorToRGB工具，转成rgb格式

utils.colorToRGB = function (color, alpha) { //if string format, convert to number if (typeof color === ‘string‘ && color[0] === ‘#‘) { color = window.parseInt(color.slice(1), 16); } alpha = (alpha === undefined) ? 1 : alpha; //extract component values var r = color >> 16 & 0xff, g = color >> 8 & 0xff, b = color & 0xff, a = (alpha < 0) ? 0 : ((alpha > 1) ? 1 : alpha); //check range //use ‘rgba‘ if needed if (a === 1) { return "rgb("+ r +","+ g +","+ b +")"; } else { return "rgba("+ r +","+ g +","+ b +","+ a +")"; }};

parseColor转换颜色格式

utils.colorToRGB = function (color, alpha) { //if string format, convert to number if (typeof color === ‘string‘ && color[0] === ‘#‘) { color = window.parseInt(color.slice(1), 16); } alpha = (alpha === undefined) ? 1 : alpha; //extract component values var r = color >> 16 & 0xff, g = color >> 8 & 0xff, b = color & 0xff, a = (alpha < 0) ? 0 : ((alpha > 1) ? 1 : alpha); //check range //use ‘rgba‘ if needed if (a === 1) { return "rgb("+ r +","+ g +","+ b +")"; } else { return "rgba("+ r +","+ g +","+ b +","+ a +")"; }};

　　console.log(utils.parseColor(0xFFFF00))
　　console.log(utils.parseColor(0xFFFF00,true))

 

 

动画原理——颜色值处理


联系
我们