相信大家都知道在前端的颜色表示方式有多种,一种是以3个或6个十六进制的数子表示,一种是RGB的数字形式,还有一种是直接以颜色的英文来表示。这三种都是不支持透明色的。所以还有RGBA的表式方式,在RGB的的基础上加入了Alpha透明,使网页可以展现更加复杂绚丽的效果。
随机颜色
在平时的码农日常中,经常会用到求随机颜色的地方,下面是我总结的几种简单的实现随机颜色的方式:
十六进制格式(#000000-#FFFFFF)
第一种是比较简单的方法,这种方法是先随机生成ffffff以内16进制数,然后判断位数,少于6位的用while循环在前面加0,凑够6位。
还有一种比较方便但是比较难懂的方法,需要用到位运算。
functionrandomHexColor() {//随机生成十六进制颜色
return'#'+ ('00000'+ (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
}
|
按执行顺序可以分为以下六步:
RGB格式
functionrandomRgbColor() {//随机生成RGB颜色
varr = Math.floor(Math.random() * 256);//随机生成256以内r值
varg = Math.floor(Math.random() * 256);//随机生成256以内g值
varb = Math.floor(Math.random() * 256);//随机生成256以内b值
return`rgb(${r},${g},${b})`;//返回rgb(r,g,b)格式颜色
}
|
RGBA格式
functionrandomRgbaColor() {//随机生成RGBA颜色
varr = Math.floor(Math.random() * 256);//随机生成256以内r值
varg = Math.floor(Math.random() * 256);//随机生成256以内g值
varb = Math.floor(Math.random() * 256);//随机生成256以内b值
varalpha = Math.random();//随机生成1以内a值
return`rgb(${r},${g},${b},${alpha})`;//返回rgba(r,g,b,a)格式颜色
}
|
颜色格式转化
在编码过程中,经常会遇到要将颜色格式相互转化的问题,其中十六进制格式和RGB格式是可以相互转化的,但是RGBA格式由于多了前两者没有的Alpha透明属性,所以和前两者转化会丢失Alpha值,不建议进行转化,下面是我的颜色转化的方法:
十六进制转为RGB
functionhex2Rgb(hex) {//十六进制转为RGB
varrgb = [];// 定义rgb数组
if(/^\#[0-9A-F]{3}$/i.test(hex)) { //判断传入是否为#三位十六进制数
let sixHex ='#';
hex.replace(/[0-9A-F]/ig,function(kw) {
sixHex += kw + kw;//把三位16进制数转化为六位
});
hex = sixHex;//保存回hex
}
if(/^#[0-9A-F]{6}$/i.test(hex)) { //判断传入是否为#六位十六进制数
hex.replace(/[0-9A-F]{2}/ig,function(kw) {
rgb.push(eval('0x'+ kw));//十六进制转化为十进制并存如数组
});
return`rgb(${rgb.join(',')})`;//输出RGB格式颜色
}else{
console.log(`Input ${hex} is wrong!`);
return'rgb(0,0,0)';
}
}
|
RGB转为十六进制
functionrgb2Hex(rgb) {
if(/^rgb\((\d{1,3}\,){2}\d{1,3}\)$/i.test(rgb)) {//test RGB
varhex ='#';//定义十六进制颜色变量
rgb.replace(/\d{1,3}/g,function(kw) {//提取rgb数字
kw = parseInt(kw).toString(16);//转为十六进制
kw = kw.length < 2 ? 0 + kw : kw;//判断位数,保证两位
hex += kw;//拼接
});
returnhex;//返回十六进制
}else{
console.log(`Input ${rgb} is wrong!`);
return'#000';//输入格式错误,返回#000
}
}
|