首页 > 代码库 > javascript把RGB指定颜色转换成十六进制颜色(Converting R,G,B values to HTML hex notation)
javascript把RGB指定颜色转换成十六进制颜色(Converting R,G,B values to HTML hex notation)
Prologue
看见一篇很好的外国文章,Making annoying rainbows in javascript,其实我当时很想把它翻译下来的,但是对于一个连六级都没过的人确实有点难度,一些文段看起来是知道意思但是就不知道怎么用自己的话来表达。越来越觉得对于IT行业来说英语至少要达到能读的程度,毕竟好的东西很多是外国的,还有哦,要会翻墙。对于那篇文章我其实还没看完,还在慢慢消化中,但是看到一个函数确实真的很吸引我,实现的是Converting R,G,B values to HTML hex(十六进制) notation。
Perface
当你看见这张照片时,你在想什么?对于文艺青年可能想放飞梦想,自由飞翔,对于二逼青年可能会想气球可不可以带我飞?(好像不太符合角色特点-_-!)。但是程序猿会想为什么计算机会显示这些颜色?确实丰富的色彩丰富我们的生活,我们要的是五彩缤纷的世界而不是只有黑白。怎么感觉在写作文啊!离题了。
description
- 函数式RGB颜色
- 计算机可以通过组合不同的红色、绿色和蓝色来创造颜色,所以红、绿、蓝就被叫做颜色分量,每个颜色分量都是8bit,取值范围为0-255
- 十六进制RGB颜色
- But the HTML color specification uses hexadecimal notation for each of the components, so that they each occupy two digits.就是说因为是十六进制,所以用两位就能使的它的取值范围在0-255了。它的格式为#RRGGBB
- 两者的联系
Component Value(in hex) Value(in decimal) Red AA 170 Green BB 187 Black CC 204
Content
可以在Making annoying rainbows in javascript中看到它写了一个函数RGB2Color,可以实现把RGB转换成十六进制。
- RGB2Color
- function RGB2Color(r,g,b)
- {
- return ‘#‘ + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
- }
- 交给byte2Hex函数执行,这个函数很有趣
- function byte2Hex(n)
- {
- var nybHexString = "0123456789ABCDEF";
- return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
- }
- 叫我写这个方法,我觉得我想破脑袋都想不出来还可以这样子玩的
Summary
现在我们来分析那段代码,其实我经常在看《javascript权威指南》总是忽略掉位运算符的,今天看来我之前的习惯是错的
- (n>>4)&0x0F
- 比如我们传来的是值为180,你用(180).toString(2)可以获得它对应的二进制为"10110100",然后你用180>>4执行后为11。所以我们用n>>4是为了获取该值对应二进制的最左边4位的值,然后再用&0x0F把它转换成16进制,而得出来的值是对于nybHexString字符串的下标的,即11对应的是B就找出来了。
- n&0x0F
- 这个可以获取n最右边的值对应的16进制,因为0x0F如果用8位表示的是0000 1111,接上面的例子如180,用二进制表示为1011 0100,因为两者是相与的,而0x0F最左边的4位全是0,而最右边4位全为1,所以我们就可以忽略掉每一个值对应的二进制的最左边的4个位,获取的是每一个值(n)对应的二进制最右边的4个位。
preferences
Making annoying rainbows in javascript
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。