文档章节

JavaScript如何计算两个颜色之间的渐变色值?

十万猛虎下画山
 十万猛虎下画山
发布于 2018/04/23 16:56
字数 278
阅读 414
收藏 0
作者:kmxz
链接:https://www.zhihu.com/question/38869928/answer/78527903
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

// convert #hex notation to rgb array
var parseColor = function (hexStr) {
  return hexStr.length === 4 ? hexStr.substr(1).split('').map(function (s) { return 0x11 * parseInt(s, 16); }) : [hexStr.substr(1, 2), hexStr.substr(3, 2), hexStr.substr(5, 2)].map(function (s) { return parseInt(s, 16); })
};

// zero-pad 1 digit to 2
var pad = function (s) {
  return (s.length === 1) ? '0' + s : s;
};

var gradientColors = function (start, end, steps, gamma) {
  var i, j, ms, me, output = [], so = [];
  gamma = gamma || 1;
  var normalize = function (channel) {
    return Math.pow(channel / 255, gamma);
  };
  start = parseColor(start).map(normalize);
  end = parseColor(end).map(normalize);
  for (i = 0; i < steps; i++) {
    ms = i / (steps - 1);
    me = 1 - ms;
    for (j = 0; j < 3; j++) {
      so[j] = pad(Math.round(Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255).toString(16));
    }
    output.push('#' + so.join(''));
  }
  return output;
};

// try if it works
console.log(gradientColors('#00ff00', '#ff0000', 100));

// 泥萌的新需求
console.log(gradientColors('#000', '#fff', 100, 2.2));

 

本文转载自:https://www.zhihu.com/question/38869928

十万猛虎下画山
粉丝 6
博文 130
码字总数 98614
作品 0
朝阳
程序员
私信 提问
WebGL 3D入门系列:绘制渐变三角形 --- 深入理解缓冲区

WebGL 3D 入门系列 --- 绘制渐变三角形:深入理解缓冲区 本节内容来自于小册 WebGL 入门与实践。 上节带领大家学习了基本三角形图元的绘制过程,以及如何使用向着色器传递多个数据,但上节只...

lucefer
03/19
0
0
EveryChart教程(一)----饼形图

EveryChart是一个使用简单,功能强大的JS绘制图表工具,这里介绍如何使用 Chart是各种图表的基类,不能被实例化,图表的公共属性有: title 标题(对象) width 宽 height 高 vivid 是否动画显示 sh...

兔宝宝
2011/08/30
3K
7
使用 HTML5 canvas 绘制精美的图形

本文主要介绍使用一个简单的 HTML 元素 Canvas 来增强您的 web 页面。通过利用其灵活性和多样性吸引访客反复访问您的站点。 HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HT...

IBMdW
2012/02/21
3.1K
4
使用 HTML5 canvas 绘制的图形

HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.0...

coko
2013/08/15
0
0
兼容性背景颜色半透明CSS代码(不影响内部子元素)

兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(0, 0, 0, .25);filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000); ......

山哥
2015/01/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

马蜂窝 IM 系统架构的演化和升级

今天,越来越多的用户被马蜂窝持续积累的笔记、攻略、嗡嗡等优质的分享内容所吸引,在这里激发了去旅行的热情,同时也拉动了马蜂窝交易的增长。在帮助用户做出旅行决策、完成交易的过程中,I...

马蜂窝技术
30分钟前
2
0
C++学习笔记:C/C++中static关键词有用途

C语言中:static关键词有三种用途 1.静态局部变量 特点: 该变量在全局数据区分配内存(局部变量在栈区分配内存) 静态局部变量在程序执行到该对象的声明处时被首次初始化,以后不会再进行初...

StupidZhe
30分钟前
2
0
Mysql Group Replication关闭和启动所有的组成员的注意点

Mysql Group Replication关闭和启动所有的组成员的注意点 2018年05月17日 11:45:02 zuozhiji 阅读数 1772 由于的我mgr建立在虚拟机上面(即使是正式环境,如果计划内的停机或者断电都需要关闭...

rootliu
34分钟前
2
0
并发模式与 RPS 模式之争,性能压测领域的星球大战

本文是《如何做好性能压测》系列专题分享的第四期,该专题将从性能压测的设计、实现、执行、监控、问题定位和分析、应用场景等多个纬度对性能压测的全过程进行拆解,以帮助大家构建完整的性能...

阿里云官方博客
35分钟前
2
0
iTOP-4412开发板基于Linux-C测试程序的编译和运行

iTOP-4412 开发板可以运行的文件系统很多,在具体的文件系统上实现特定功能前,可 以使用 Linux-C 程序来测试硬件以及驱动。而且这些程序很容易移植到 Android、Qt/E 以及 最小文件系统上。 ...

书白
36分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部