程序说明
【ColorGrads颜色梯度】
程序ColorGrads的作用是根据颜色集合和渐变级数生成颜色梯度集合。 渐变级数的意思是分多少步完成渐变。
网页设计中的颜色是用RGB色彩模式呈现的。 在这个模式中每种颜色可以用三个代表红(r)、绿(g)、蓝(b)的颜色值(0到255)来表示。
从w3c的Colors部分看到标准中颜色的表示形式包括: 关键字形式: em { color: red } RGB形式: em { color: #f00 } em { color: #ff0000 } em { color: rgb(255, 0, 0) } em { color: rgb(100%, 0%, 0%) } 以上都是表示同一种颜色(红色)。 关键字形式就是用关键字代表颜色值。 而RGB形式,前两种用的比较多,都是一个"#"后面带16进制表示的颜色值,第三种是用十进制的颜色值,第四种是实际值跟255的百分比形式。
各个浏览器对各种颜色表示形式的获取并不相同:
"color: red"形式: |
|
ie |
opera |
ff |
chrome/safari |
style |
red |
red |
#ff0000 |
red |
currentStyle |
red |
"red" |
|
|
getComputedStyle |
|
#ff0000 |
rgb(255, 0, 0) |
rgb(255, 0, 0) |
"color: #ff0000"/"color: #f00"形式: |
|
ie |
opera |
ff |
chrome/safari |
style |
#ff0000/#f00 |
#ff0000 |
rgb(255, 0, 0) |
rgb(255, 0, 0) |
currentStyle |
#ff0000/#f00 |
#ff0000 |
|
|
getComputedStyle |
|
#ff0000 |
rgb(255, 0, 0) |
rgb(255, 0, 0) |
"color: rgb(255, 0, 0)"/"color: rgb(100%, 0%, 0%)"形式: |
|
ie |
opera |
ff |
chrome/safari |
style |
rgb(255,0,0) |
#ff0000 |
rgb(255, 0, 0) |
rgb(255, 0, 0) |
currentStyle |
rgb(255,0,0) |
#ff0000 |
|
|
getComputedStyle |
|
#ff0000 |
rgb(255, 0, 0) |
rgb(255, 0, 0) |
基本上得到的值还是按标准的形式显示的,只是有些会自动转换形式。 不过ie的rgb形式跟ff/chrome/safari的不同,数值之间并没有空格。 要特别注意的是opera用currentStyle获取关键字形式得到的颜色值是带双引号的,十分奇怪,要尽量避免使用。
要获取两种颜色的渐变梯度,先要把颜色转化成能用来计算的数值。 GetColor和GetData程序就是用来把符合w3c标准表示的颜色值转化成组合该颜色的红(r)、绿(g)、蓝(b)的颜色数值。 RGB形式的值本身就已经带了rgb的具体数值,只要用正则把值提取出来再转化就可以了。
这个过程在GetData中进行:
function GetData(color) { var re = RegExp; if (/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.test(color)) { //#rrggbb return $$A.map([ re.$1, re.$2, re.$3 ], function(x){ return parseInt(x, 16); }); } else if (/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.test(color)) { //#rgb return $$A.map([ re.$1, re.$2, re.$3 ], function(x){ return parseInt(x + x, 16); }); } else if (/^rgb\((.*),(.*),(.*)\)$/i.test(color)) { //rgb(n,n,n) or rgb(n%,n%,n%) return $$A.map([ re.$1, re.$2, re.$3 ], function(x){ return x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x | 0; }); } }
注意#rrggbb/#rgb形式得到的是16进制的数值字符,把parseInt的第二个参数设为16就可以指定用16进制来处理字符串转换。 对于rgb(n,n,n)/rgb(n%,n%,n%)的形式,直接取得数值,如果有%就根据百分比计算对应数值就行了。 使用这种形式设置颜色时也要注意, ie6和ie7允许数字百分比混用,其他不可以(包括ie8); ie6和ie7可以用空格或逗号分隔数值,其他必须用逗号(包括ie8); 当然我们使用时也应该是按照w3c的标准来设置了。 ps:那个DHTML 手册上写的 EM { color: rgb 1.0 0.0 0.0 } 是不能用的,不要被误导了。
出处:蓝色理想
责任编辑:bluehearts
上一页 JavaScript颜色梯度和渐变效果改进 [1] 下一页 JavaScript颜色梯度和渐变效果改进 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|