|
如果是關(guān)鍵字形式那就要另外想方法了，可以用一個字典對象來匹配顏色值，但這樣程序會變得很龐大。
ps：可以到 這里看所有顏色名對應(yīng)的數(shù)值。
近來dean發(fā)表了“Convert any colour value to hex in MSIE”，終于解決了這個難題。
其中的關(guān)鍵是利用queryCommandValue("ForeColor")來獲取顏色值（或許做過編輯器的會比較熟悉）。
queryCommandValue 的作用是返回document、range或current selection對于給定命令的當前值。
而 ForeColor 命令是設(shè)置或獲取文本時的前景色。
具體的做法是先創(chuàng)建一個textarea：
if (!frag) {
frag = document.createElement("textarea");
frag.style.display = "none";
document.body.insertBefore(frag, document.body.childNodes[0]);
};
ps：由于 ie的document.body.appendChild()導(dǎo)致IE已終止操作bug ，所以要用insertBefore。
然后設(shè)置color為要取值的顏色：
try { frag.style.color = color; } catch(e) { return [0, 0, 0]; }
在ie如果設(shè)置錯誤的顏色值會報錯，所以這里用try...catch來保證能返回值。
能使用queryCommandValue的包括document、range和current selection。
用createTextRange就可以建立一個range：
color = frag.createTextRange().queryCommandValue("ForeColor");
createTextRange可以用在Body，Button，Input和TextArea。
在dean的方法中是用createPopup().document.body的，好處是不用插入元素到dom。
但createPopup是ie的方法，而TextArea還可以用于getComputedStyle，后面會用到。
這樣得到的顏色值是一個數(shù)值，這個數(shù)字跟顏色的關(guān)系是這樣的：
例如紅色的16進制rgb是ff0000，先轉(zhuǎn)成bgr，即0000ff，然后轉(zhuǎn)成10進制，得到255。
同樣粉紅色pink是FFC0CB，轉(zhuǎn)成bgr是CBC0FF，10進制是13353215。
ps：使用時要注意queryCommandValue("ForeColor")得到的顏色是bgr排列的，跟一般的不一樣。
要得到rgb的值可以把轉(zhuǎn)換過程倒過來獲取，不過參考dean的文章有更巧妙的方法：
ret = [ color & 0x0000ff, (color & 0x00ff00) >>> 8, (color & 0xff0000) >>> 16 ];
先用與操作(&)把對應(yīng)位的數(shù)值取出來，再用右移運算符(>>>)把數(shù)值移到正確的位置上。
例如粉紅色FFC0CB要取得綠(g)的顏色值，用與操作(&)取得對應(yīng)值，F(xiàn)FC0CB & 0x00ff00得到C000，然后右移8個數(shù)位得到C0(16進制的一位相當于二進制的4位)，即192。
其他支持document.defaultView的可以直接用getComputedStyle獲取color。
從上面各個瀏覽器獲取顏色值的結(jié)果可知獲取的值都是RGB形式的值，所以可以直接用GetData轉(zhuǎn)換：
ret = GetData(document.defaultView.getComputedStyle(frag, null).color);
注意除了ff，如果元素沒有插入dom，用getComputedStyle是獲取不了color的，所以元素創(chuàng)建時要順便插入到body中。
在GetStep用GetColor獲得顏色值之后，再根據(jù)step就可以獲得步長了：
r colors = [], start = GetColor(start), end = GetColor(end),
stepR = (end[0] - start[0]) / step,
stepG = (end[1] - start[1]) / step,
stepB = (end[2] - start[2]) / step;
再根據(jù)步長生成集合：
for(var i = 0, r = start[0], g = start[1], b = start[2]; i < step; i++){
colors[i] = [r, g, b]; r += stepR; g += stepG; b += stepB;
}
colors[i] = end;
正確的顏色值是在0到255之間的，而且是不帶小數(shù)的，需要修正一下：
return $$A.map(colors, function(x){ return $$A.map(x, function(x){
return Math.min(Math.max(0, Math.floor(x)), 255);
});});
程序支持設(shè)置多個顏色的連續(xù)變換：
for(var i = 0, n = len - 1; i < n; i++){
var steps = GetStep( colors[i], colors[i+1], step );
i < n - 1 && steps.pop();
ret = ret.concat(steps);
}
注意的是各次變換之間要去掉重復(fù)的顏色（steps.pop()）。
出處：藍色理想
責任編輯：bluehearts
上一頁 JavaScript顏色梯度和漸變效果改進 [2] 下一頁 JavaScript顏色梯度和漸變效果改進 [4]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 JavaScript顏色梯度和漸變效果改進 [3]
