【JavaScript】Canvasで使う色の指定を一定幅で行う

JavaScript

こんにちは、しきゆらです

タイトルは何を言っているのかわからないかもしれません・・・(語彙力、説明力？不足)

例えば、色を3段階とか10段階とかのような方法で指定する方法を思いついたのでメモ

 

Processingという言語では、色を一定の幅ごとに変化するように指定することができます

colorModeという関数を用いて、RGBからHSLに変更し、合わせて色の幅を指定することで

上記のようなことができます

 

これをJSでも使いたい！

でもどうすれば・・・

と思って調べてみたら、方法を思いついたのでメモ

 

どういうことをやろうとしているの？

やりたいことは、Canvas上にグラフを描くことです

ライブラリはいっぱいあるのですが、書き方を調べてそれに合うようにデータを作って・・・

とやるよりも早いことと、自分で作るため拡張しやすいためですね

あとは、単純に自分でやってみたかったってこと

 

グラフは、よくあるこんなやつ

graph

上の例ではデータは３つ

しかし、データがいくら増えてもきちんと色分けしてほしい

そんなグラフを作りたいと思ったわけです

 

そこで、最初に書いたようなProcessingの関数を思い出したわけですね

その中で、色の指定する方法としてHSLというものがあることを知りました

 

HSLとはなんぞや？

HSLとは、RGBのように色を指定する方法の一つです

RGBでは「赤、緑、青」の組み合わせで指定しますが、HSLは「色相、彩度、輝度」で色を指定します

参考：http://gigazine.net/news/20150217-rgb-hsl/

 

簡単に言うと、色を円盤上に配置したイメージですかね(色相)

あとは、明るさと鮮やかさを指定することで色を指定しています

 

RGBは３つの色を混ぜて指定していましたが、HSLでは色は色相の部分で指定するため

１つの値を変化させるだけで色を指定することができます(これ重要)

 

やりたいことをコードにする

Canvasで色を指定するには「fillStyle」や「strokeStyle」で色を指定すればいいわけですが

ここでHSLで指定してあげます

参考：http://webos-goodies.jp/archives/50811624.html

context.strokeStyle = "hsl(100, 100%, 50%)";

 

参考サイトさんにあるように、

  • 色相：0から360の間
  • 彩度：0%から100%の間
  • 輝度：0%から100%の間

で指定してあげます

 

これを、グラフで使う場合は

色相をデータの数で割ってあげればいいわけですね

こんな感じ

var color_range = 360 / data.length;
var x = 0;
for (var i = 0; i < data.length; i++) {
    ctx.fillStyle = "hsl(" + color_range * i + ", 100%, 50%)";
    ctx.fillRect(x, start_heigt, data[i], bar_height);
    x += data[i];
}

やってることは

  • data[0]の大きさだけ四角を描く
  • グラフの開始位置をdata[0]の長さ分ずらす

これをdataの要素数分ひたすら繰り返しているだけです

 

色の指定は４行目部分

 ctx.fillStyle = "hsl(" + color_range * i + ", 100%, 50%)";

for文はdataの要素数回繰り返すので、色の幅を求め(color_range)それに繰り返した回数をかければいいわけです

 

実際にコードを書いてみるとそこまで難しいことではないですね

でも、HSLを使わずにどう書けばいいかわからないな・・・

 

 

今回はこの辺で

おわり

Posted by しきゆら