[筆記] Touch Draw with in HTML5

-- 前言 --

Safari2Phone做兩天就膩了(天呀, 我無可救藥), 昨天想到玩點別的

第一階段目標, 用"<canvas>" tag + JQMobile (其實非必要) 做了一個Tocuh Draw, 就是手指在Canvas上畫圖, 像這樣(這是測試結果):

----

測試平台: Nexus One (Android) + WebView

碰到的問題:

Canvas可以很正常的在Android上跑沒問題, 但主要是event的問題, 本來用addEventListener('mousemove', draw)的方式, 沒想到在mobile環境全部怪怪的

手機上的event應該是touchstart, touchend, touchmove, 其中touchmove跟mousemove有點不同, mousemove不用mousedown就會被觸發, 但touchmove卻是在有touch的狀況下才會發生

touch event的點也不一定只有一點, 所以有event.touches, 而這是一個array, 裡面放每一點座標, 像是clientX, clientY之類的

Canvas的部份, 用moveTo->lineTo來畫這些經過點就可以達成了(筆記: 下一步做一個queue來儲存)