テーマの基本　その４
（固定色編）

バッテリー残量をテキスト表示するところまでできました。
キャンバスが正方形のままであったり、フォントサイズも大きめのままだったりしますが、見た目よりも機能改善を優先すべきかと思います。
ここでは、テキスト表示をネタに、固定色の指定方法を紹介します。

固定色を指定する

テキスト表示では、色を指定していないにも関わらず、黒色で表示されました。
逆に、指定しなければ黒色で表示されると考えることもできます。

では、色を指定してみましょう。
色を指定する方法は幾つかありますが、テクスト表示は「塗りつぶし」で表示しましたので、塗りつぶす色を指定することにします。
塗りつぶしの色指定は、以下のように記述します。
ctx.fillStyle="色指定";
色指定も幾つかありますので、以下に紹介します。

色の名前で指定する

色の名前というのは、「白」とか「赤」などのことです。
ただ、この手のモノは英数字で記述するべきなので、色の名前も、もちろん英語表記です。
ですので、「white」や「red」といった感じになります。

では、個人的な好みで「オレンジ」を指定してみます。
(height, percent, charge, low, lpm, m_color, b_color) {

　var canvas = document.createElement("canvas");
　canvas.height = height;
　canvas.width = height;
　var ctx = canvas.getContext("2d");

　ctx.font = height*0.8 + "px";
　ctx.textAlign = "center";
　ctx.textBaseline="middle";
　ctx.fillStyle="orange";
　ctx.fillText(percent, height/2, height/2);

　return canvas.toDataURL("image/png");
}
考えれば当たり前のことなのですが、テキストを表示する前に、色を指定していることに注意してください。

表示してみると、こんな感じです。

オレンジ色で表示されました。

このサンプルのダウンロード　ー＞　basic4_1.zip

カラーコード（ＲＧＢ）で指定する

色の名前で指定する場合、とても直感的で分かりやすいのですが、150種類弱しかありません。
150種類もあれば、希望の色に近い色は見つかると思いますが、妥協も必要になってきます。
そこで登場するのが「カラーコード」で、約1,670万色もの色数が表現できます。
グラフィックソフトやスタイルシートなどで、#から始まるモノをみたことがあるなら、まさにそれで、以下のように記述します。
"#RRGGBB" 「#」の記号と6つの英数字で構成されるのがカラーコードで、英数字は16進数で表されています。
ＲＧＢの順に色の濃さをそれぞれ２桁ずつ指定しますが、00が最も薄く、FFが最も濃くなっています。
「#FF00FF」の場合、赤と青を最大の濃さにして緑を無しにするので、紫となる訳です。

ちなみに、#00FFFFでは水色 (Aqua) となり、#FFFF00だと黄色になります。
では、黄色を指定してみましょう。
テキスト表示に黄色を指定したプログラムは、以下の通りです。
(height, percent, charge, low, lpm, m_color, b_color) {

　var canvas = document.createElement("canvas");
　canvas.height = height;
　canvas.width = height;
　var ctx = canvas.getContext("2d");

　ctx.font = height*0.8 + "px";
　ctx.textAlign = "center";
　ctx.textBaseline="middle";
　ctx.fillStyle="#FFFF00";
　ctx.fillText(percent, height/2, height/2);

　return canvas.toDataURL("image/png");
}
表示してみると、こんな感じです。

黄色は白系の色ですので、白地だと見にくいですね・・・

このサンプルのダウンロード　ー＞　basic4_2.zip


これだけ見にくいと、やはりオレンジの方が良いと思いますが、黄色を黒っぽくすることを考えます。

黄色は #FFFF00 ですので、赤と緑でできていることがわかります。
どちらも最大の濃さですので、この数字を小さくすることで黒に近づけていきましょう。
では、#EEEE00 から試してみます。
こんな感じになりました。

何となく暗くなったことがわかりますね。
FFをEEにしましたので、数値としては11下がった感じですが、16進数の11ですので、10進数では17下がったことになります。
カラーコードでは、微妙な色合いも表現できますので、１つだけ下げるなら#FEFE00とするのが筋です。
まぁ、そこまで理解する必要はありませんが、数字を下げていることが分かっていただければ十分です。

続けて、#DDDD00でやってみると・・・

白地の方は見やすくなり始めた感じですが、ホーム画面（黒地）の方は見にくくなり始めた感じです。
これ以上やっても結果は良くないことが分かりきっていますので、続けて#CCCC00でやってみると・・・

思ったほど悪くありませんでしたね。
しかし、黄色は黄色で表示したいので、黒の縁取りを考えた方が良さそうですね。
縁取りに関しては、またの機会で紹介します。

ちなみに、#CCCC00を#CC0としても機能します。

カラーコード（ＲＧＢ）で指定する　その２

こちらもＲＧＢによる指定なのですが、16進数での指定ではありません。
どうせ覚えるなら16進数を覚えて、Web関連やグラフィック関連にも通じる知識にしていただきたいところですが、何が重要なのかを考えると、16進数よりも色指定の基本ですので、「その２」と題しまして紹介します。

早速ですが、指定するには以下のように記述します。
ctx.fillStyle="rgb(赤の濃さ, 緑の濃さ, 青の濃さ)"; 理解しやすい記述方法かと思います。
全体を文字列として指定するのですが、ＲＧＢそれぞれの色の濃さをコンマ区切りで並べます。
ここでの色の濃さが、16進数ではなく10進数なのです。
16進数では00〜FFでしたが、10進数では0〜255となります。
１６進数では#FFFF00と表した黄色が、"rgb(255, 255, 0)"という書き方になります。
16進数を覚えなくても、10進数で約1,670色を表現できるようになるのです。
やることは16進数でやったことと同じですが、10進数で黄色を指定したプログラムは、以下の通りです。
(height, percent, charge, low, lpm, m_color, b_color) {

　var canvas = document.createElement("canvas");
　canvas.height = height;
　canvas.width = height;
　var ctx = canvas.getContext("2d");

　ctx.font = height*0.8 + "px";
　ctx.textAlign = "center";
　ctx.textBaseline="middle";
　ctx.fillStyle = "rgb(255, 255, 0)";
　ctx.fillText(percent, height/2, height/2);

　return canvas.toDataURL("image/png");
}
表示してみると、こんな感じです。

16進数と同じことをやっているので結果も同じなのですが、やはり黄色は白地に合わないですね・・・

このサンプルのダウンロード　ー＞　basic4_3.zip


せっかくなので、10進数でも数字を減らしてやってみます。
255を200にすると、こんな感じになりました。

まぁ、こんな感じですね。

ちなみに、200を16進数で表すとC8となりますので、#C8C800を指定したことと同じになります。

ＲＧＢＡで指定する

10進数による色指定の流れで、もう１つ紹介します。
ＲＧＢの後ろに「Ａ」があるのがポイントです。
この「Ａ」は「アルファ」の「Ａ」で、透過率を表します。

色指定は、以下のように記述します。
ctx.fillStyle="rgba(赤の濃さ, 緑の濃さ, 青の濃さ, 透過率)"; ＲＧＢと似ているので、こちらも理解しやすいかと思います。
透過率は、0（0%）〜 1（100%）で指定します。
透過率1で黄色を指定したプログラムは、以下の通りです。
(height, percent, charge, low, lpm, m_color, b_color) {

　var canvas = document.createElement("canvas");
　canvas.height = height;
　canvas.width = height;
　var ctx = canvas.getContext("2d");

　ctx.font = height*0.8 + "px";
　ctx.textAlign = "center";
　ctx.textBaseline="middle";
　ctx.fillStyle = "rgba(255, 255, 0, 1)";
　ctx.fillText(percent, height/2, height/2);

　return canvas.toDataURL("image/png");
}
表示してみると、こんな感じです。

何度も同じことをやっているので結果も同じなのです。

このサンプルのダウンロード　ー＞　basic4_4.zip


今回は透過率が指定できるので、透過率を下げてみましょう。
透過率を0.7（70%）にすると、こんな感じになりました。

透過率を下げると薄くなっていくだけなので、どちらも見にくくなっていますね。

やはり、縁取りを考えるべきですね。