[android][js] Androidのブラウザ上でお絵描き

touchmoveというイベントを使うらしい、と知ったので、試しにやってみました。

Androidのブラウザ上でお絵描きするサンプル

2010/6/28追記: たぶんiPhoneでも動くようになったんじゃないかと思います。前に動かなかったのはevent.pageXを見ていたせいで、iPhoneではevent.touches[0].pageXを見ないといけないようです。マルチタッチ対応?さらにjQueryを使っていると追加の罠があって、jQueryのイベントオブジェクトは生のイベントオブジェクトではないらしく、そっちにはtouchesが入っていません…。なので正解はevent.originalEvent.touches[0].pageX。ぬぬぬ。

Android特有と思われる罠としては、単にtouchmoveイベントを使うと、タッチ直後ちょっとだけtouchmoveイベントが発生して、その後は発生しないという謎の挙動になります。touchstart(とtouchmove?)でe.preventDefault()すると、ちゃんと発生するようになります。*1

Xperiaでも、ネイティブのお絵描きアプリに比べると重い(ゆっくり描かないと訳が分からなくなる)ですね。

*1:スクロールする操作だと認識された瞬間からイベントが発生しなくなるとかそんな感じでしょうか。