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 相关文章推荐
深入理解JSON数据源格式
Jan 10 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
php INI配置文件的解析实现分析
2011/01/04 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
灵泰克Java笔试题
2016/01/09 面试题
化学实验员岗位职责
2013/12/28 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
古诗之感恩老师
2019/10/24 职场文书
python 实现图片特效处理
2022/04/03 Python
Python使用Web框架Flask开发项目
2022/06/01 Python