4-2.フォーカスされると色が変わる

フォーカス色は設定で変更できる

samplejpg

WindowsやMacでもダイアログにある入力部品にフォーカスが移るとその旨の表示が控えめに追加されますが、スマートフォンのフォーカス表示は決して控えめではありません。 このため、この表示をそのままにしていると、Canvas上に画像を表示して操作するインターフェースは実質的に作れません。

しかし、この問題は簡単に回避することができます。

CSSに特別な設定を追加する

#id_canvas2 {
  position:absolute;
  top: 10px;
  left: 60px;
  z-index: 2;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

上記は3章で作成した15パズルゲームのHTMLファイル内にあるCSS定義部分です。 -webkit-・・・の部分が必要な追加で、rgba(0,0,0,0)を設定することで、ハイライト色を透明にしています。

サンプルゲームに適用してみる

3章で作成した15パズルゲームをHVGA画面のAndroidエミュレータ上で動作させ、初期画面をクリックすると以下のように表示色が変わります。

上記では、canvas全体に半透明のオレンジ色表示が入っていますが、前述のCSS設定を追加すると、このオレンジ色の表示は無くなります。