javascriptで指定色を等分したグラデーションの自動作成

分かりづらいタイトルなので実際のものを

こんな感じ

実際のコードは以下 *枠線は除いてある

<div style="background: linear-gradient(to right , pink 0 , pink 33.32% , palegreen 33.33% , palegreen 66.65% , lightskyblue 66.66% , lightskyblue 100%);">

指定色 [ pink, palegreen, lightskyblue ] で等分したグラデーションになっている

これをjavascriptで自動作成するには

function gradientGen(colors) {
    var texts = ['to right'];
    var ratio = 100 / colors.length;
    for (var i = 0; i < colors.length; i++) {
        if (i != 0) {
            texts.push(colors[i-1] + ' ' + ((ratio * i)-0.01) + '%');
        }
        texts.push(colors[i] + ' ' + ratio * i + '%');
    }
    texts.push(colors[colors.length-1] + ' 100%')
    return 'linear-gradient(' + texts.join(',') + ')';
}

var colorList = ['pink','palegreen','lightskyblue'];
gradientGen(colorList)

このようになる

+ばかりで汚いコードだが、順に説明
textsの初期化では方向を入れており、これを 'to left' にすれば右から左に
 'to right bottom' にすれば左上から右下へと対角線上にグラデーションがかかる

次のratioは色数で割ったパーセンテージ

texts.push()が3箇所あるが
1番目は色を綺麗に分けるために0.1引いた数値
2番目がratioで出した割合
3番目は最後の100%を入れるためのもの

この1番目を入れないと

こんな感じ

<div style="background: linear-gradient(to right , pink 0, pink 25% , palegreen 50% , lightskyblue 75% , lightskyblue 100%);">

*色の割合指定は終端の値なので最初のグラデーションから数値を変えている

このように混ざってしまう
ただグラデーションの意味的にはこっちのほうが正解かもしれない

最後に文字列をくっつけて出力
あとは要素のstyle.backgroundに設定すればいい