1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 前端js十六进制格式的颜色和rgba格式颜色互转

前端js十六进制格式的颜色和rgba格式颜色互转

时间:2020-03-14 20:01:46

相关推荐

前端js十六进制格式的颜色和rgba格式颜色互转

一.十六进制转RGBA

/** @param: hex { string} 例如:"#23ff45"* @param: opacity { string || number } 透明度* @return: { string } rgba格式*/function hexToRgba(hex, opacity) {return "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + "," + opacity + ")"}

二.RGBA转十六进制

方法1:这个好理解

const toHex = function(r, g, b) {const INT_HEX_MAP = {10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' };const hexOne = function(value) {value = Math.min(Math.round(value), 255);const high = Math.floor(value / 16);const low = value % 16;return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low); // 转换核心};if (isNaN(r) || isNaN(g) || isNaN(b)) return '';return '#' + hexOne(r) + hexOne(g) + hexOne(b);};

方法2:核心规则不好理解

/** @param: color { string}* @return: { string } 十六进制*/function colorRGB2Hex(color) {var rgb = color.split(',')var r = parseInt(rgb[0].split('(')[1])var g = parseInt(rgb[1])var b = parseInt(rgb[2].split(')')[0])var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);return hex}var myHex = colorRGB2Hex('rgba(255,232,186,0.4)')console.log(myHex) // "#f5faf3"

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。