关于颜色渐变的把控
这要说到最近一次的客户需求了，我遇到了一个问题，地图呈现数据的时候用颜色来表达数值大小。这里用户只要提供2个区间峰值，然后我要根据这个值来获取区间内的某一个色调。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#color {
display: flex;
width: 300px;
}
</style>
</head>
<body>
<div id='color'></div>
</body>
<script>
var toColor = {
toNum (c1 , c2 ,num){
var ary = []
num = num - 1;
for( var i = 0; i < num ; i++ ){
ary.push(this.to(c1,c2,i/num));
}
ary.push(c2);
return ary;
},
to: function(c1, c2, v) {
c1 = this.colorToArray(c1);
c2 = this.colorToArray(c2);
if (typeof v === "string" && v.indexOf("%") > 0) {
v = parseInt(v) / 100;
}
c1[0] += parseInt((c2[0] - c1[0]) * v);
c1[1] += parseInt((c2[1] - c1[1]) * v);
c1[2] += parseInt((c2[2] - c1[2]) * v);
return this.ArrayToColor(c1);
},
colorToArray: function(color) {
if (typeof color === "string" && color.indexOf("#") > -1) {
return this.hexToArray(color);
}
},
hexToArray: function(color) {
var i = 1;
var a, b, c;
a = parseInt("0x" + color.substring(i, i += 2));
b = parseInt("0x" + color.substring(i, i += 2));
c = parseInt("0x" + color.substring(i, i += 2));
return [a, b, c];
},
ArrayToColor: function(array) {
var a, b, c;
a = array[0].toString(16);
b = array[1].toString(16)
c = array[2].toString(16);
if( a.length == 1 ){ a = "0" + a; }
if( b.length == 1 ){ b = "0" + b; }
if( c.length == 1 ){ c = "0" + c; }
return "#" + a + b + c;
}
}
var ca = toColor.toNum("#008000","#ff0000",100);
for( var a in ca ){
var div = document.createElement("div");
div.style.cssText = "width:15px;height:15px;background: "+ca[a]+";";
color.appendChild(div);
}
</script>
</html>
这里面开放了一个函数 toColor.to( c1,c2,v );
c1 是指最低值
c2 是指最高值 （其实就是2个峰值）
v 是靠近度 这是一个百分比值 区间为 0 - 1 允许输入的格式是 '10%' or 0.5
