JavaScript 顏色梯度和漸變效果第1/3頁
更新時間：2009年03月15日 21:15:07 作者：
程序ColorGrads的作用是通過StartColor和EndColor生成顏色梯度集合。
程序說明
【ColorGrads顏色梯度】
程序ColorGrads的作用是通過StartColor和EndColor生成顏色梯度集合。
顏色都可以用紅(r)、綠(g)、藍(b)三個顏色來表示。
程序中先通過GetColor把一般的顏色表示形式轉(zhuǎn)化成一個用紅(r)、綠(g)、藍(b)三個顏色值作元素的集合。
那就首先要知道有什么顏色表示形式，從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è)置時的形式返回。
先說說RGB顏色模式，前兩種比較常用應(yīng)該都明白他們的區(qū)別吧，它用的是16進制表示形式，而我們想要10進制的。
把一個16進制表示的字符轉(zhuǎn)成10進制數(shù)字，一般用parseInt，在substr截取字符之后就可以用parseInt轉(zhuǎn)換。
對于#ff0000這個形式可以這樣轉(zhuǎn)換：
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseInt(x, 16); }
)
parseInt的第二個參數(shù)就是第一個參數(shù)的進制值。
對于#f00形式，跟上一個差不多，只是轉(zhuǎn)換之前要先換成完整表示形式：
return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],
function(x){ return parseInt(x + x, 16); }
)
后面兩種可能用的就比較少了，一個用10進制的rgb顏色值表示，另一個用百分比來表示。
ff嚴(yán)格按照那樣的格式來表示，而ie就“放松”很多，例如：
ie可以允許數(shù)字百分比混用，ff不可以；
ff必須有逗號分隔，ie可以只用空格分隔；
當(dāng)然我們使用時最好是按照w3c的標(biāo)準(zhǔn)來設(shè)置了。
ps：那個DHTML 手冊上寫的 EM { color: rgb 1.0 0.0 0.0 } 根本不能用的，不要被誤導(dǎo)了。
對這個形式，程序用正則取得數(shù)值，如果有%就根據(jù)百分比計算出對應(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)化卻很麻煩，因為沒有一定規(guī)律只能一個一個對應(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); }
)
}
在Create創(chuàng)建顏色集合程序中獲得開始顏色和結(jié)束顏色的數(shù)據(jù)后，再根據(jù)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;
再根據(jù)步長生成集合：
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之間的，而且是不帶小數(shù)的，所以最好修正一下：
return Map(colors, function(x){ return Map(x, function(x){
return Math.min(Math.max(0, Math.floor(x)), 255);
});});
【ColorGrads顏色梯度】
程序ColorGrads的作用是通過StartColor和EndColor生成顏色梯度集合。
顏色都可以用紅(r)、綠(g)、藍(b)三個顏色來表示。
程序中先通過GetColor把一般的顏色表示形式轉(zhuǎn)化成一個用紅(r)、綠(g)、藍(b)三個顏色值作元素的集合。
那就首先要知道有什么顏色表示形式，從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è)置時的形式返回。
先說說RGB顏色模式，前兩種比較常用應(yīng)該都明白他們的區(qū)別吧，它用的是16進制表示形式，而我們想要10進制的。
把一個16進制表示的字符轉(zhuǎn)成10進制數(shù)字，一般用parseInt，在substr截取字符之后就可以用parseInt轉(zhuǎn)換。
對于#ff0000這個形式可以這樣轉(zhuǎn)換：
復(fù)制代碼 代碼如下:
return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
function(x){ return parseInt(x, 16); }
)
parseInt的第二個參數(shù)就是第一個參數(shù)的進制值。
對于#f00形式，跟上一個差不多，只是轉(zhuǎn)換之前要先換成完整表示形式：
復(fù)制代碼 代碼如下:
return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],
function(x){ return parseInt(x + x, 16); }
)
后面兩種可能用的就比較少了，一個用10進制的rgb顏色值表示，另一個用百分比來表示。
ff嚴(yán)格按照那樣的格式來表示，而ie就“放松”很多，例如：
ie可以允許數(shù)字百分比混用，ff不可以；
ff必須有逗號分隔，ie可以只用空格分隔；
當(dāng)然我們使用時最好是按照w3c的標(biāo)準(zhǔn)來設(shè)置了。
ps：那個DHTML 手冊上寫的 EM { color: rgb 1.0 0.0 0.0 } 根本不能用的，不要被誤導(dǎo)了。
對這個形式，程序用正則取得數(shù)值，如果有%就根據(jù)百分比計算出對應(yīng)數(shù)值：
復(fù)制代碼 代碼如下:
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)化卻很麻煩，因為沒有一定規(guī)律只能一個一個對應(yīng)：
復(fù)制代碼 代碼如下:
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創(chuàng)建顏色集合程序中獲得開始顏色和結(jié)束顏色的數(shù)據(jù)后，再根據(jù)Step（多少步）就可以獲得步長了：
復(fù)制代碼 代碼如下:
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;
再根據(jù)步長生成集合：
復(fù)制代碼 代碼如下:
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之間的，而且是不帶小數(shù)的，所以最好修正一下：
復(fù)制代碼 代碼如下:
return Map(colors, function(x){ return Map(x, function(x){
return Math.min(Math.max(0, Math.floor(x)), 255);
});});
相關(guān)文章
這篇文章主要為大家詳細介紹了js如何驗證密碼強度，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
用JavaScript調(diào)用WebService的示例
JavaScript用htc實現(xiàn)WebService的調(diào)用2008-04-04
現(xiàn)在的網(wǎng)頁中經(jīng)常會有一些圖像連接，當(dāng)鼠標(biāo)指向它的時候，圖像換成另外一幅圖像，它們都是先預(yù)讀圖像的，下面也有個不錯的實例，感興趣的朋友可以參考下2013-11-11
這篇文章主要介紹了微信小程序國際化探索實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
JavaScript canvas實現(xiàn)七彩太陽光暈效果
這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)七彩太陽光暈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
“Promises”漸漸成為JavaScript里最重要的一部分，大量的新API都開始promise原理實現(xiàn)。這篇文章主要為大家詳細介紹了JavaScript Promise 用法，感興趣的小伙伴們可以參考一下2016-06-06
JS 中document.write()的用法和清空的原因淺析
這篇文章主要介紹了JS 中document.write()的用法和清空的原因淺析,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了JS實現(xiàn)漂亮的時間選擇框效果,結(jié)合實例形式分析了javascript時間選擇框插件的實現(xiàn)與使用方法,需要的朋友可以參考下2016-08-08
js實現(xiàn)跨域的幾種方法匯總（圖片ping、JSONP和CORS）
平時用慣了jQuery.ajax之類的方法，卻時常忽略了它背后的實現(xiàn)，本文是學(xué)習(xí)了AJAX基礎(chǔ)及幾種跨域解決方案之后的一些收獲。2015-10-10
11種JavaScript前端數(shù)據(jù)去重方式總結(jié)
這篇文章主要為大家總結(jié)了JavaScript去重的11種方式，各有優(yōu)缺點，文中的示例代碼講解詳細，具有一定的學(xué)習(xí)價值，需要的可以根據(jù)需求合理使用2023-06-06