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

javascript把RGB指定颜色转换成十六进制颜色(Converting R,G,B values to HTML hex notation)的更多相关文章

  1. python 练习题:请利用Python内置的hex()函数把一个整数转换成十六进制表示的字符串

    # -*- coding: utf-8 -*- # 请利用Python内置的hex()函数把一个整数转换成十六进制表示的字符串 n1 = 255 n2 = 1000 print(hex(n1)) pr ...

  2. php日期转时间戳,指定日期转换成时间戳

    写过PHP+MySQL的程序员都知道有时间差,UNIX时间戳和格式化日期是我们常打交道的两个时间表示形式,Unix时间戳存储.处理方便,但 是不直观,格式化日期直观,但是处理起来不如Unix时间戳那么 ...

  3. delphi 浮点数float转换成十六进制字符串的方法(FloatToHex)

    重新书写了float型转为十六进制的delphi程序 Function FloatToHex(Value: single): string; var l, i: integer; HexText,te ...

  4. delphi 浮点数转换成十六进制字符串的方法

    我们在研究封包技术时,经常会碰到将浮点数转换成十六进制形式.比如在游戏中人物的座标,经常就用浮点数来表示.怎么将浮点数转换成十六进制字符串形式呢?下面我将写出其在DELPHI中的方法.       先 ...

  5. 图片转换成十六进制TXT文件

    最近学习了图片的转换,就学习了一下图片从二进制转换成十六进制,十六进制TXT文件转换成图片形式. using System; using System.Collections.Generic; usi ...

  6. JavaScript进阶(四)js字符串转换成数字的三种方法

    js字符串转换成数字的三种方法 在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b. ...

  7. 将真彩色转换成增强色的方法(即RGB32位或RGB24位颜色转换成RGB16位颜色的函数)

    今天由于程序需要,需要将真彩色转换成增强色进行颜色匹配,上网搜了一下没搜到相应函数,于是研究了一下RGB16位的增强色,写了这个函数: public static int RGB16(int argb ...

  8. wpf中将string格式的颜色转换成color类型

    wpf中Brushes有很多对应的颜色,先盗张图,每个颜色对于的名称和ARGB值有了,问题是有时候我们取到的颜色是ARGB值,而且是string类型的,该怎么转换成color呢,只有转换成color之 ...

  9. 「新手必看」Python+Opencv实现摄像头调用RGB图像并转换成HSV模型

    在ROS机器人的应用开发中,调用摄像头进行机器视觉处理是比较常见的方法,现在把利用opencv和python语言实现摄像头调用并转换成HSV模型的方法分享出来,希望能对学习ROS机器人的新手们一点帮助 ...

随机推荐

  1. myeclipse之完全破解

    并不是所有的破解都是成功的,就如并不是所有的战争都会胜利一样,我们在做事情的时候,总会遇到些问题,比如Activate不成功,需要手动激活. 激活不成功就是不成功,来回的破解.卸载.重装,都还是不可能 ...

  2. 在linux下编译运行C++程序

    头一回...把windows下的程序挪到linux下,代码见这篇随笔 1.编译ZTHREAD,使用./configure失败,直接编译的,方法还是上面提到的那篇随笔 2.编译源码,最开始用的cc,后来 ...

  3. HTML5自定义属性之data-index

    #使用jquery获取data-index的值 jquery 的版本最好高一些 #html <div id = 'div'><span data-field='demo'>&l ...

  4. php将远程图片下载保存到本地

    /* *功能:php完美实现下载远程图片保存到本地 *参数:文件url,保存文件目录,保存文件名称,使用的下载方式 *当保存文件名称为空时则使用远程文件原来的名称 */ function getIma ...

  5. [原创]OpenERP 7.0 打印PDF报表 中文 乱码问题的解决方案。

    网上的解决方案基本上以替换字体和安装上海先锋科技开发的软件包配置两种方案,替换字体的方案尝试了几次都么有成功,安装软件包的方案成功. 软件环境:Ubuntu Server 12.04 第一步:先到ht ...

  6. Unix系统编程()文件空洞

    如果程序的文件偏移量已然跨越了文件结尾,然后再执行IO操作,将会发生什么情况? read调用将会返回0,表示文件结尾.令人惊讶的是,write函数可以在文件结尾后的任意位置写入数据. 从文件结尾后到新 ...

  7. 球队以及得分计算的SQL语句

    首先题目是这样的: 球队表teams 比赛表matches 赢了得3分,平局的得1分,输了得0分. 思路: 一个球队的成绩分为两部分,作为主队的得分和作为客队的得分: 计算出一次比赛中具体得了多少分, ...

  8. android 开发积累

    1.ListView滚动黑屏问题 ListView滚动时,数据项变成黑色 问题解决办法:通过添加 android:cacheColorHint = "#00000000" 将背景设 ...

  9. 【vijos】1790 拓扑编号(拓扑+贪心)

    https://vijos.org/p/1790 好神的贪心题.. 一开始我也想到了贪心,但是是错的..sad 就是因为每一个节点的编号与逆图的子树有关,且编号一定是>=子树的儿子+1的.但是想 ...

  10. Access 是/否 字段

    Microsoft Access 数据库引擎 SQL 数据类型包含由 Microsoft® Jet 数据库引擎定义的 13 种主要数据类型,以及若干可识别为这些数据类型的有效同义词. 其中,在工作中遇 ...