JS实现颜色的10进制转化成rgba格式的方法


Posted in Javascript onSeptember 04, 2017

本文实例讲述了JS实现颜色的10进制转化成rgba格式的方法。分享给大家供大家参考,具体如下:

当我们在已知一个整数如(0~256x256x256x256 之间的颜色值),想获得关于它的3原色加一个透明度时,即alpha, red, green, blue,可采用如下方法:

方法一:

function getColor(number) {
  let color = number;
  const blue = parseInt(color % 0x100, 10);
  color = color >>> 8;
  const green = parseInt(color % 0x100, 10);
  color = color >>> 8;
  const red = parseInt(color % 0x100, 10);
  const alpha = (parseInt(color >>> 8, 10) / 0xFF).toFixed(1);
  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
}

方法二:

function getColor(number) {
  const alpha = number >> 24 & 0xff;
  const red = number >> 16 & 0xff;
  const green = number >> 8 & 0xff;
  const blue = number & 0xff;
  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
}
Javascript 相关文章推荐
js继承 Base类的源码解析
Dec 30 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
谈谈JS中的!!
Dec 07 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
vue生命周期实例小结
Aug 15 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
JavaScript实现前端网页版倒计时
Mar 24 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 #Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 #Javascript
node-sass安装失败的原因与解决方法
Sep 04 #Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 #Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 #Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 #Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 #Javascript
You might like
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
Vue实现购物车功能
2017/04/27 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
简单了解python的一些位运算技巧
2019/07/13 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
python3代码中实现加法重载的实例
2020/12/03 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
冰淇淋店创业计划书范文
2013/12/27 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
商业房地产广告语
2014/03/13 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
校园活动宣传方案
2014/03/28 职场文书
中班开学寄语
2014/04/04 职场文书
岳庙导游词
2015/02/04 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang