例子: 值为:rgba(194, 7, 15, 1) ,转化16进制为: #c2070f
//转化颜色
function getHexColor(color) {
var values = color
.replace(/rgba?\(/, '')
.replace(/\)/, '')
.replace(/[\s+]/g, '')
.split(',')
var a = parseFloat(values[3] || 1),
r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
return '#' +
('0' + r.toString(16)).slice(-2) +
('0' + g.toString(16)).slice(-2) +
('0' + b.toString(16)).slice(-2)
}
getHexColor('rgba(194, 7, 15, 1) '); // #c2070f
分析代码:
//转化颜色
function getHexColor(color) { // 传的color须为字符串
var values = color
.replace(/rgba?\(/, '') // 把 "rgba(" 去掉,变成 "194, 7, 15, 1)"
.replace(/\)/, '') // 把 ")" 去掉,变成 "194, 7, 15, 1"
.replace(/[\s+]/g, '') // 把空格去掉,变成 "194,7,15,1"
.split(',') // 变成数组 [194,7,15,1]
var a = parseFloat(values[3] || 1), // values[3]是rgba中的a值,没有的话设置a为1,a可能为小数,所以用parseFloat函数
r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255), // 转换为16进制
g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
return '#' +
('0' + r.toString(16)).slice(-2) + // 转换后的16进制可能为一位,比如 7 就转换为 7 , 15 转换为 f
('0' + g.toString(16)).slice(-2) + // 当为一位的时候就在前面加个 0,
('0' + b.toString(16)).slice(-2) // 若是为两位,加 0 后就变成了三位,所以要用 slice(-2) 截取后两位
},