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 相关文章推荐
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 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
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php学习之function的用法
2012/07/14 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
Python随机数random模块使用指南
2016/09/09 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
大型营销活动计划书
2014/04/28 职场文书
项目合作协议书
2014/09/23 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书