☰

Javascript カラーグラデーション 質問する

tag-icon • tag-icon javascript colors gradient rgb
Javascript カラーグラデーション 質問する

JQuery の有無にかかわらず JavaScript を使用して、開始色と終了色に基づいて色のグラデーションを作成する必要があります。これはプログラムで実行できますか?

終了色は開始色より暗い色調になりますが、これは順序なしリスト用であり、リスト項目の数を制御できません。開始色と終了色を選択し、16 進値を RGB に変換してコードで操作できるソリューションを探しています。開始 RGB 値は、項目数に基づいて計算されたステップ値によって増加します。

したがって、リストに 8 つの項目がある場合、最終的な色を得るために、個別の赤、緑、青の値を 8 ステップで増分する必要があります。これを実行するより良い方法はありますか。また、ある場合、サンプル コードはどこで入手できますか。

ベストアンサー1

JSライブラリを作成しました。RainbowVis-JSこの一般的な問題を解決するには、 を使用してアイテムの数を設定しsetNumberRange、 を使用して開始色と終了色を設定するだけですsetSpectrum。その後、 で 16 進カラー コードを取得しますcolourAt。

var numberOfItems = 8;
var rainbow = new Rainbow(); 
rainbow.setNumberRange(1, numberOfItems);
rainbow.setSpectrum('red', 'black');
var s = '';
for (var i = 1; i <= numberOfItems; i++) {
    var hexColour = rainbow.colourAt(i);
    s += '#' + hexColour + ', ';
}
document.write(s); 
// gives:
// #ff0000, #db0000, #b60000, #920000, #6d0000, #490000, #240000, #000000,

ライブラリのソースコードをぜひご覧ください。:)

おすすめ記事