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检测浏览器flash版本的实现代码
Dec 06 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
JS数组的常用方法整理
Mar 31 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调用Oracle存储过程
2006/10/09 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
浅谈PHP表单提交(POST&GET&URL编/解码)
2017/04/03 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
javascript常用功能汇总
2015/07/05 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
vue使用video插件vue-video-player详解
2020/10/23 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现图片批量剪切示例
2014/03/25 Python
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
python如何爬取网页中的文字
2020/07/28 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
2014年扶贫工作总结
2014/11/18 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
股东大会通知
2015/04/24 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP