JavaScript カラーグラデーションとグラデーション効果ページ 1/3_JavaScript スキル

プログラムの説明
[ColorGrads カラー グラデーション]
プログラム ColorGrads の機能は、StartColor と EndColor を通じて設定されたカラー グラデーションを生成することです。
色は赤(r)、緑(g)、青(b)の3色で表現できます。
プログラムでは、まずGetColorにより赤(r)、緑(g)、青(b)の3つの色値を要素としたセットに一般的な色表現を変換します。
次に、最初にどのような色表現があるのか​​を知る必要があります。w3c の色セクションから、次の形式があることがわかります:
キーワード モード:
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カラーモードの3番目の形式を返しますが、ieは設定内の形式を返します。
最初に RGB カラー モードについて説明します。最初の 2 つはより一般的に使用されており、それらの違いを理解する必要があります。16 進数表現が必要です。
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 の 2 番目のパラメーターは、最初のパラメーターの基本値です。
#f00 形式の場合、変換前に完全な表現に変換する必要があることを除いて、前の形式とほぼ同じです。

コードをコピーします。 コードは次のとおりです:

return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1) )],
function(x){ return parseInt(x を表現します。
ff はその形式で厳密に表現されますが、ie はより「緩和」されています。たとえば、
ie では数値と​​パーセンテージを混合できますが、

ff はカンマで区切る必要があります。

もちろん、これを使用する場合は、w3c 標準に従って設定するのが最善です。
追記: DHTML マニュアルに書かれている EM { color: rgb 1.0 0.0 0.0 } は全く使えません。誤解しないでください。
このフォームでは、プログラムは正規表現を使用して値を取得します。% がある場合、対応する値はパーセンテージに基づいて計算されます。




をコピーします。 code

コードは次のとおりです:

return Map(color.match(/d (.d )?%?/g), function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10) } )

コピーコード

というように、ルールは 1 つずつしか対応できないため、キーワードを変換するのは非常に面倒です。コードは次のとおりです:

varmapping = {"red": "#FF0000"};//省略color = Mapping[color.toLowerCase()]; (color){ return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],

function(x){ return parseInt( x, 16); }

)
}



カラーセット作成プログラムで開始カラーと終了カラーのデータを取得した後、次の値に基づいてステップ長を取得できます。ステップ (ステップ数):

コードをコピー

コードは次のとおりです:

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[2] ){ 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); }) ;});