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 Accessor实现说明
Dec 06 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 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如何透过ODBC来存取数据库
2006/10/09 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
php设计模式之单例模式代码
2016/06/11 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
vue实现弹幕功能
2019/10/25 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
Python global全局变量函数详解
2018/09/18 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
html5绘制时钟动画
2014/12/15 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
编程实现去掉XML的重复结点
2014/05/28 面试题
连锁酒店店长职责范本
2014/02/13 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
Java中API的使用方法详情
2022/04/06 Java/Android
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技