D3.js绘制 颜色:RGB、HSL和插值 (V3版本)
2019-05-13 07:14:01来源:博客园 阅读 ()
1 //RGB
2 var color1 = d3.rgb(40,80,0)
3 var color2 = d3.rgb("red")
4 var color3 = d3.rgb("rgb(0,255,255)")
5
6 //将color1的颜色变亮
7 console.log(color1.brighter(2)) //返回值的颜色为{r: 81, g: 163, b: 0}
8 console.log(color1) //原颜色值不变依然返回{r: 40, g: 80, b: 0}
9
10 //将color2的颜色变亮
11 console.log(color2.darker(2)) //返回值的颜色为{r: 124, g: 0, b: 0}
12 console.log(color2) //原颜色值不变依然返回{r: 255, g: 0, b: 0}
13
14 //输出color3颜色的HSL值
15 console.log(color3.hsl()) //返回值{h: 180, s: 1, l: 0.5}
16
17 console.log(color3.toString()) //返回#00ffff
1 //HSL
2 var hsl = d3.hsl(120,1.0,0.5);
3
4 //变得更亮
5 console.log(hsl.brighter()) //输出{h: 120, s: 1, l: 0.7142857142857143}
6
7 //变得更暗
8 console.log(hsl.darker()) //输出 {h: 120, s: 1, l: 0.35}
9
10 //返回对应的rgb值
11 console.log(hsl.rgb()) //输出{r: 0, g: 255, b: 0}
12
13 console.log(hsl.toString()) //输出#00ff00
1 //插值
2 var a = d3.rgb(255,0,0) //红色
3 var b = d3.rgb(0,255,0) //绿色
4 var compute = d3.interpolate(a,b)
5
6 console.log(compute(0)) //输出#ff0000
7 console.log(compute(0.2)) //输出#cc3300
8 console.log(compute(0.5)) //输出#808000
9 console.log(compute(1)) //输出#00ff00
10
11 console.log(compute(2)) //输出#00ff00
12 console.log(compute(-1)) //输出#ff0000
原文链接:https://www.cnblogs.com/littleSpill/p/10847057.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:数组去重方法
- javascript如何获取图片颜色 2020-03-08
- EChart绘制风速风向曲线分析图 2019-08-14
- d3.js制作蜂巢图表带动画效果 2019-08-14
- D3.js 动画 过渡效果 (V3版本) 2019-05-22
- D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图 2019-05-22
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash