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 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
mpvue 单文件页面配置详解
Dec 02 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
JavaScript封装单向链表的示例代码
Sep 17 Javascript
Ajax实现页面无刷新留言效果
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
新闻分类录入、显示系统
2006/10/09 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
javascript回到顶部特效
2016/07/30 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
Pytorch之contiguous的用法
2019/12/31 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
学习十八大精神心得体会
2013/12/31 职场文书
美发活动策划书
2014/01/14 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
水电维修专业推荐信
2014/09/06 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书