JavaScript 顏色梯度和漸層效果第1/3頁

程式說明
【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);
});});