JavaScript で色相環を作る

作り方

HTML

<ul id="color-wheel"></ul>

この中に三角形の li 要素を 1deg づつずらして並べていきます。360角形を作ります。

JavaScript

(function() {
    var triangle = document.createElement("li");
    var colorWheel = document.getElementById("color-wheel");
    var triangleStyle = triangle.style;
    var colorWheelStyle = colorWheel.style;

    //外枠のスタイル指定
    colorWheelStyle.top = "20px";
    colorWheelStyle.left = "115px";
    colorWheelStyle.width = "230px";
    colorWheelStyle.height = "230px";
    colorWheelStyle.margin = "20px auto 60px"; //中央化
    colorWheelStyle.position = "relative";

    //三角形のスタイル指定
    triangleStyle.width = "0";
    triangleStyle.height = "0";
    triangleStyle.position = "absolute";
    triangleStyle.borderStyle = "solid";
    triangleStyle.borderWidth = "115px 1px 0";
    triangleStyle.borderColor = "#f00 transparent transparent";
    triangleStyle.transformOrigin = "50% 100%";
    triangleStyle.listStyleType = "none";

    //360回 for で繰り返し
    for (var i = 0; i < 360; i++) {
        var triangleClone = triangle.cloneNode();
        var triangleCloneStyle = triangleClone.style;

        //1deg づつずらす
        triangleCloneStyle.transform = "rotate(" + i + "deg)";

        //hsl でグラデーションをかけて色指定
        triangleCloneStyle.borderImage = "linear-gradient(to bottom, hsl(" + i + ", 100%, 50%), #fff) 100% / 115px 1px 0";
        colorWheel.appendChild(triangleClone);
    }
})()

デモ

こちらは画像ではなくリスト要素で表示しています。

元記事の stylus で作る場合との違いは、stylus はスタイルシートでの指定になりますが、JavaScript ではインライン style 属性での指定となっています。

詳細は元記事の方が詳しいのでそちらを参考にしていただければ良いと思うのですが、色相環を作る上でのポイントは border への「hsl」での色指定だと思います。

色指定は RGB（#ff0000 や rgb(0,0,0)）の指定が一般的ですが、hsl での色指定も CSS3 から追加されています。hsl の h を 0～360 まで変化させることで色を一周できる色指定です。グラデーションをかけることで中心に近づくほど白くなるようにしています。

参考：CSS3 で追加された HSL の使い方

まとめ

完全にネタをパクっていますので何ともという感じですね…。元記事はせっかく stylus を使っているのに JavaScript で作るという時代に逆行している感も否めませんが、作ってみると楽しかったです。

こういうものを作るときは canvas 要素を使って作るのが普通な気もしますが、リスト要素で作ってしまうという荒業すごいです。回転軸をずらして360角形にしてしまうというところも面白いです。

ブラウザによって表示が多少ずれてしまうので（360個も要素使ってるので…）実用性とかはわかりませんが、ナイスアイデア賞を贈りたい記事です。