程序说明
【colorgrads颜色梯度】
程序colorgrads的作用是通过startcolor和endcolor生成颜色梯度集合。
颜色都可以用红(r)、绿(g)、蓝(b)三个颜色来表示。
程序中先通过getcolor把一般的颜色表示形式转化成一个用红(r)、绿(g)、蓝(b)三个颜色值作元素的集合。
那就首先要知道有什么颜色表示形式，从w3c的colors部分可以知道有以下形式：
关键词模式：
em { color: red }
rgb颜色模式：
em { color: #f00 }
em { color: #ff0000 }
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
以上都是表示同一种颜色（红色）。
获取颜色属性的形式在ie和ff并不同，ff统一返回rgb颜色模式的第三种形式，ie则按照设置时的形式返回。
先说说rgb颜色模式，前两种比较常用应该都明白他们的区别吧，它用的是16进制表示形式，而我们想要10进制的。
把一个16进制表示的字符转成10进制数字，一般用parseint，在substr截取字符之后就可以用parseint转换。
对于#ff0000这个形式可以这样转换：
复制代码 代码如下:
return map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseint(x, 16); }
)
parseint的第二个参数就是第一个参数的进制值。
对于#f00形式，跟上一个差不多，只是转换之前要先换成完整表示形式：
复制代码 代码如下:
return map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],
function(x){ return parseint(x + x, 16); }
)
后面两种可能用的就比较少了，一个用10进制的rgb颜色值表示，另一个用百分比来表示。
ff严格按照那样的格式来表示，而ie就“放松”很多，例如：
ie可以允许数字百分比混用，ff不可以；
ff必须有逗号分隔，ie可以只用空格分隔；
当然我们使用时最好是按照w3c的标准来设置了。
ps：那个dhtml 手册上写的 em { color: rgb 1.0 0.0 0.0 } 根本不能用的，不要被误导了。
对这个形式，程序用正则取得数值，如果有%就根据百分比计算出对应数值：
复制代码 代码如下:
return map(color.match(/\d+(\.\d+)?\%?/g),
function(x){ return parseint(x.indexof(%) > 0 ? parsefloat(x, 10) * 2.55 : x, 10); }
)
而关键词大家都很熟悉，要转化却很麻烦，因为没有一定规律只能一个一个对应：
复制代码 代码如下:
var mapping = {red:#ff0000};//略
color = mapping[color.tolowercase()];
if(color){
return map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseint(x, 16); }
)
}
在create创建颜色集合程序中获得开始颜色和结束颜色的数据后，再根据step（多少步）就可以获得步长了：
复制代码 代码如下:
startcolor = this.getcolor(this.startcolor),
endcolor = this.getcolor(this.endcolor),
stepr = (endcolor[0] - startcolor[0]) / this.step,
stepg = (endcolor[1] - startcolor[1]) / this.step,
stepb = (endcolor[2] - startcolor[2]) / this.step;
再根据步长生成集合：
复制代码 代码如下:
for(var i = 0, n = this.step, r = startcolor[0], g = startcolor[1], b = startcolor[2]; i < n; i++){
colors.push([r, g, b]); r += stepr; g += stepg; b += stepb;
}
colors.push(endcolor);
正确的颜色值是在0到255之间的，而且是不带小数的，所以最好修正一下：
复制代码 代码如下:
return map(colors, function(x){ return map(x, function(x){
return math.min(math.max(0, math.floor(x)), 255);
});});