|
... |
|
Androidのブラウザ（mobile safari 4.0）が他のブラウザと違って思い通りに動かない。
1) canvasの描画でfillStyleに指定した内容が正確に表現できない場合ある（薄くぼやけた感じになってしまう）
fillStyleで透明度も指定してglobalAlphaも設定するとおかしくなるようだ。
2) ページの読込みが完了しない
何故かページの読込みが完了しない。ずっとアドレス表示エリアの下に表示しているプログレスバーが消えない。どうもsocket.io.jsでソケット通信をしているのが原因らしい。
とりあえず、それをやめれば完了するが、それでもしばらく時間がかかる。
Android上でもChromeなら問題なく動く。ブラウザはまだまだ発展途上なのか？それとも使用しているスマホの問題か・・・？
JQueryでtouch系イベント（touchstart、touchmove、touchendなど）をbindする際に以下のように引数を指定した形で定義すると思うが、ここで渡ってくる引数からはマウスの座標等は取得できないらしい（モバイル用があるからそちらを使用しろということかも知れないが）。
ここで取得するには window.event （グローバル変数）から取得する。
JQueryではなくコントロールの addEventListener でイベントハンドラを設定した場合は、その引数から取得可能。
canvasのデータをtoDataURLで取得し、ajaxでサーバに送信する処理を作成したみた。
するとアップロードしたデータが表示できない。
prototype.jpのajaxを使用した場合はアップロードしたデータは正常に表示できる。
調べてみるとJQueryで送信した場合、ajaxに設定したデータに含まれるプラス（’+’）が、半角スペース(' ')に変換されている。
JQuery.ajax の processDataの設定にせいかと思い、falseを設定してみるが変わらない。
ネットで調べるとコンテンツタイプが ’x-www-form-urlencoded’ の場合は、半角スペースをはプラスに変換して送信することになっているらしい（RFC1866 Section-8.2.1）。
しかし何故かJQueryでは逆の変換がされているような・・・？？？
この辺の知識がなくいろいろ調べてみるがよくわからずデバッガで追っていくと、prototype.js の場合、XMLHttpRequestで送信するデータのプラス（'+'）、半角スペース（' '）、スラッシュ（'/'） がそれぞれURLエンコード（？）されて、%2b、%20、%2Fになっている。
JQueryの場合は実際どうなっているのかよくわからないが、sendを実行する時点までにデータが変換されている様子はない（そこまで追い切れないのですが…）。
基本的に外側でそのエンコードをするべきなのかと思ってａｊａｘに設定する前に変換すると正常にデータがアップロードされた。
果たしてこれでいいのだろうか？
現時点でBezitterには以下の機能があります。
魚の形をした秒針のHTML5のcanvasで作成した時計。
別Windowでopen 極小(200,200) 小(346,346) 中(480, 480) 大(852, 852)
キー操作により各機能を設定できます。
※ IMEがONになっていると機能しないので注意！
バージョンアップされたばかりのChromeだが、今まで出来ていたCanvasに対して文字列を出力（fillText）する場合の影付け効果が利かなくなった。
・バージョン：16.0.912.63 m
以下はChromeで影付けの設定を行って描画した結果。影付けがされていない。
以下はFirefoxで同様に描画した結果。正常に影が描画されている。
Canvas描画ツールで以下のコードを実行すると上記の結果を見ることができる。
context.shadowBlur = 10;
context.shadowColor = 'red';
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.font = "84px 'Comic Sans MS'";
context.fillText("Hello!", 300, 100);
window.onloadが呼ばれなくなる バグもまだ修正されていないようで、個人的にはメインのブラウザとして気に入って使用しているのに残念である。
早急に修正して欲しい！
＜追記＞
HTML5のCanvasの描画スクリプトをテストするツール。
本日（12/8）、数日前は正常に表示されていたページが何故かChromeでは正常に表示されなくなった。
FireFoxやIEでは正常に表示されている。
Chromeのバージョンは15.0.874.121 m。
特にHTMLもスクリプトも変更していない。
全部のページではなく、一部のページで現象が発生している。
調べてみると何故か window.onload が呼ばれない。
スクリプト、HTMLを削って調べていくと、何故か audio タグがあると現象が発生するようである。
その部分をコメント化すると正常に表示された。
以下にサンプル（onloadでブラウザの情報を表示する）のリンクを示す。
※ onloadが呼ばれないのでブラウザの情報を表示していない。
※ audio 要素をコメント化しているので、onloadが呼ばれてブラウザの情報を表示している。
Chrome は自動的にアップデートされるようになっているが、いつの間にかバグが入ってしまったのか、早期の修正を希望します。
＜追記＞
写真に自分のサインを追加するツールをHTML5のcanvasを使って作成してみた。
Chrome(15.0.874.106 m)、Firefox(7.0.1)で動作確認。IE8は動作不可、IE9は未確認。
以下の画像のクリックで起動します。
