Prologue

看见一篇非常好的外国文章,Making annoying rainbows in javascript,事实上我当时非常想把它翻译下来的,可是对于一个连六级都没过的人确实有点难度,一些文段看起来是知道意思可是就不知道怎么用自己的话来表达。

越来越认为对于IT行业来说英语至少要达到能读的程度。毕竟好的东西非常多是外国的,还有哦,要会FQ。对于那篇文章我事实上还没看完,还在慢慢消化中,可是看到一个函数确实真的非常吸引我。实现的是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

最新文章

  1. 详解Maple如何公式推导和生成代码
  2. PHP生成迅雷、快车、旋风等软件的下载链接代码实例
  3. 彻底删除mysql服务
  4. Android -- 距离感应器控制屏幕灭屏白屏
  5. 【poj3691-DNA repair】AC自动机+DP
  6. [BZOJ 1044] [HAOI2008] 木棍分割 【二分 + DP】
  7. I2C Verilog的实现(一)
  8. iOS内存泄漏自动检测工具PLeakSniffer
  9. Java发邮件:Java Mail与Apache Mail
  10. 【转】EditText大小(长宽)的多种设置方式----不错
  11. Android01-概述
  12. Java笔记:与系统交互、系统相关的类,Object类
  13. Spring注解问题,[action中注入service失败
  14. ------- 软件调试——挫败 QQ.exe 的内核模式保护机制 -------
  15. SQL 数据库语言分析总结(二)
  16. 关于bootstrap报错
  17. Spring事件通知机制
  18. python中类中的@property
  19. JVM有哪些分区?(解释详细 通俗易懂)
  20. Angular factory自定义服务

热门文章

  1. Oracle之批量生成数据
  2. hadoop本地化运行
  3. ubuntu/linux安装Atom
  4. 小型web服务器thttpd的学习总结(下)
  5. awk数组处理字符串合并
  6. ssd算法的pytorch实现与解读
  7. Ubuntu上安装与配置JDK1.8
  8. Django(模板语言-自定义filter和simple_tag)
  9. 68、 FragmentPagerAdapter+ViewPager实现Tab
  10. Http服务器实现文件上传与下载(二)