テーマの基本　その６
（テキスト装飾編）

バッテリー残量のテキスト表示に固定色で着色するところで、縁取りの必要性を感じていました。
それは可変色で着色した時も感じていたので、ここでやってみます。

縁取りをする

では、テキストの装飾で一般的な「縁取り」をやってみましょう。
テーマの基本　その３（テキスト表示編）の最初の方で、「輪郭を表示するよりも、塗りつぶした方が見やすい」という理由でfillTextを使ってきました。
そこで登場した「strokeText」で、テキストの輪郭表示することができるので、これを使いましょう。
「strokeText」を使ったプログラムは、以下の通りです。
(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);
　ctx.strokeStyle="#000000";
　ctx.strokeText(percent, height/2, height/2);

　return canvas.toDataURL("image/png");
}
fillTextにはfillStyleで色を指定し、strokeTextにはstrokeStyleで色を指定します。
塗りつぶしは黄色で、輪郭は黒色にしました。

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

黒背景（ホーム画面）でも白背景でも、数値が分かるようになりました。

ここで気になったのが、テキスト表示の順番です。
塗りつぶしのテキストを表示してから輪郭のテキストを表示したので、輪郭から表示したらどうなるか気になったのです。

順番を入れ替えるだけなので、チャチャっとやってみました。

輪郭の上に塗りつぶしのテキストが乗るので、輪郭が消えるかと思ったのですが、微妙に輪郭が残って、逆に見やすくなりましたね。
テキスト表示の順番は、輪郭→塗りつぶしの順を定番としましょう。


では、縁取り装飾の仕上げとして、可変色を割り当てましょう。
塗りつぶしにメインカラーを、輪郭にベースカラーを割り当てることにします。
この時、ベースカラーから透過率を省こうと思います。

仕上げのプログラムは、以下の通りです。
(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.strokeStyle="rgb(" + b_color.slice(0, 3).join() + ")";
　ctx.strokeText(percent, height/2, height/2);
　ctx.fillStyle="rgb(" + m_color.join() + ")";
　ctx.fillText(percent, height/2, height/2);

　return canvas.toDataURL("image/png");
}

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


結果を並べてみると、輪郭は透過率込みでも良かったかもしれませんね。


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

影を落とす

次も、テキストの装飾で一般的な「影」をやってみましょう。
影と言っても、単純ではありません。
影の色に始まり、影の大きさや向きなど、いろいろ工夫できます。

全体に影を付ける

影の基本的なところから始めます。
これで終わっても良いくらい、しっかりと影を落とすことができます。

では、影だけに、色は黒としましょう。
大きさは良く分からないので、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.shadowColor="#000000";
　ctx.shadowBlur = 10;
　ctx.strokeStyle="rgb(" + b_color.slice(0, 3).join() + ")";
　ctx.strokeText(percent, height/2, height/2);
　ctx.fillStyle="rgb(" + m_color.join() + ")";
　ctx.fillText(percent, height/2, height/2);

　return canvas.toDataURL("image/png");
}
影の色は、16進数で色指定しました。

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

影が大きすぎました・・・

影の大きさは、半分の5くらいにしようと思うのですが、絶対的な「5」にするか、相対的な「5」にするか気になってしまいました。
単純に「5」を指定したとして、私がテストしているiPhone6Plusで上手く表示できたとしても、iPhone5で同じように表示できるか確証がないからです。
そんな訳で、確認してみました。

左がiPhone6Plus、右がiPhone5での結果です。iPhone5の結果は、高さを揃えるために画像を1.5倍してあります。
左の影よりも、右の影の方が大きく見えます。
ということは、絶対的な指定はやめたほうが良さそうですね。

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

では、相対的な指定を考えましょう。
デバイスによって大きさを変えないといけないので、取得できる情報の中にデバイスの特徴を示すモノを使います。
と言っても、ステータスバーの高さしかありませんね。

では、ステータスバーの高さを使って、指定してみます。
iPhone6Plusにおけるステータスバーの高さは60ですので、切りの良い1/10で試してみます。
「5」にするために1/12でも良いのですが、他デバイスではほぼ割り切れないので、割り切れる可能性の高い1/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.shadowColor="#000000";
　ctx.shadowBlur = height / 10;
　ctx.strokeStyle="rgb(" + b_color.slice(0, 3).join() + ")";
　ctx.strokeText(percent, height/2, height/2);
　ctx.fillStyle="rgb(" + m_color.join() + ")";
　ctx.fillText(percent, height/2, height/2);

　return canvas.toDataURL("image/png");
}


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

やはり、もう少し小さくしたいですね。

では、当初の1/12を超える1/15で試してみましょう。
15で割り切れないデバイスのために、端数を切り捨てる処理も施しておきます。
割り算結果の端数を切り捨てるには、以下のような書き方をします。
　ctx.shadowBlur = Math.floor(height / 15);

書き換えて試した結果は、以下の通りです。

これくらいの大きさのほうが良さそうですね。

iPhone5でも試してみました。

ちょうど良さそうですね。

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

相対的な指定ができましたので、影の色をベースカラーにして仕上げます。
影の色だけなので、以下のように書き換えました。
ctx.shadowColor="rgb(" + b_color.slice(0, 3).join() + ")";
透過率を切り捨てて、クッキリ仕様のベースカラーを影の色にしました。

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

クッキリしすぎてる感が否めませんね。
せっかくのベースカラーですので、透過率を使ってみましょう。

ベースカラーを本来のＲＧＢＡで指定します。
ctx.shadowColor="rgba(" + b_color.join() + ")";

書き換えて試した結果は、以下の通りです。

透過率が仇になったようなので、クッキリしてても良さそうですね。
好みで使い分けてください。

ただ、ＲＧＢＡで指定しておけば、「設定」から透過率を指定することができます。
おそらく、それが本来の使い方だと思います。

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

影を移動させる

影は移動させることもできます。 と言っても、動きを付ける訳ではありません。単なる「オフセット」です。

影のオフセットは、以下のように記述します。 ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
この手のモノは、右方向と下方向がプラスです。

では、右に2ピクセル、下にも3ピクセルずらしてみましょう。
プログラムの全体は、以下の通りです。
(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.shadowColor="rgba(" + b_color.join() + ")";
　ctx.shadowBlur = Math.floor(height / 15);
　ctx.shadowOffsetX = 3;
　ctx.shadowOffsetY = 3;
　ctx.strokeStyle="rgb(" + b_color.slice(0, 3).join() + ")";
　ctx.strokeText(percent, height/2, height/2);
　ctx.fillStyle="rgb(" + m_color.join() + ")";
　ctx.fillText(percent, height/2, height/2);

　return canvas.toDataURL("image/png");
}
とても分かりやすい指定方法ですね。

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

右下に、移動しているのが分かります。
しかし、ここはクッキリ仕様の方が分かりやすかったですね。

では、クッキリさせましょう。
ではなく、オフセット量も相対的にしましょう。
テスト機はiPhone6Plusですので、ステータスバーの高さを基準にすると、1/20になります。

以下のように、書き換えます。
ctx.shadowOffsetX = height / 20;
ctx.shadowOffsetY = height / 20;
せっかくなので、書き換えついでに、クッキリ仕様も試してみました。

こんな感じです。

これも、好みによって分かれそうですね。

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