|
程序說(shuō)明
【ColorGrads顏色梯度】
程序ColorGrads的作用是通過(guò)StartColor和EndColor生成顏色梯度集合。
顏色都可以用紅(r)、綠(g)、藍(lán)(b)三個(gè)顏色來(lái)表示。
程序中先通過(guò)GetColor把一般的顏色表示形式轉(zhuǎn)化成一個(gè)用紅(r)、綠(g)、藍(lán)(b)三個(gè)顏色值作元素的集合。
那就首先要知道有什么顏色表示形式，從 w3c的Colors部分 可以知道有以下形式：
關(guān)鍵詞模式：
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統(tǒng)一返回RGB顏色模式的第三種形式，ie則按照設(shè)置時(shí)的形式返回。
先說(shuō)說(shuō)RGB顏色模式，前兩種比較常用應(yīng)該都明白他們的區(qū)別吧，它用的是16進(jìn)制表示形式，而我們想要10進(jìn)制的。
把一個(gè)16進(jìn)制表示的字符轉(zhuǎn)成10進(jìn)制數(shù)字，一般用parseInt，在substr截取字符之后就可以用parseInt轉(zhuǎn)換。
對(duì)于#ff0000這個(gè)形式可以這樣轉(zhuǎn)換：
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseInt(x, 16); }
)
parseInt的第二個(gè)參數(shù)就是第一個(gè)參數(shù)的進(jìn)制值。
對(duì)于#f00形式，跟上一個(gè)差不多，只是轉(zhuǎn)換之前要先換成完整表示形式：
return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],
function(x){ return parseInt(x + x, 16); }
)
后面兩種可能用的就比較少了，一個(gè)用10進(jìn)制的rgb顏色值表示，另一個(gè)用百分比來(lái)表示。
ff嚴(yán)格按照那樣的格式來(lái)表示，而ie就“放松”很多，例如：
ie可以允許數(shù)字百分比混用，ff不可以；
ff必須有逗號(hào)分隔，ie可以只用空格分隔；
當(dāng)然我們使用時(shí)最好是按照w3c的標(biāo)準(zhǔn)來(lái)設(shè)置了。
ps：那個(gè)DHTML 手冊(cè)上寫的 EM { color: rgb 1.0 0.0 0.0 } 根本不能用的，不要被誤導(dǎo)了。
對(duì)這個(gè)形式，程序用正則取得數(shù)值，如果有%就根據(jù)百分比計(jì)算出對(duì)應(yīng)數(shù)值：
return Map(color.match(/\d+(\.\d+)?\%?/g),
function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); }
)
而關(guān)鍵詞大家都很熟悉，要轉(zhuǎn)化卻很麻煩，因?yàn)闆](méi)有一定規(guī)律只能一個(gè)一個(gè)對(duì)應(yīng)：
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); }
)
}
出處：cloudgamer
責(zé)任編輯：bluehearts
上一頁(yè) JavaScript 顏色梯度和漸變效果 [1] 下一頁(yè) JavaScript 顏色梯度和漸變效果 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) JavaScript 顏色梯度和漸變效果 [2]
