導遊圖是這樣的，導遊圖跟實際路線是有區別的，畢竟我們也不是搞測繪的。實際景點有疏有密，為了效果好，畫圖時分布均勻了。
1.獲取手機螢幕寬高，設定canvas標籤的寬高。
2.繪製地圖、繪製人。
3.獲取所在位置，計算景點與人的距離，選出距離最小的景點。在此點上繪製人。人在景區走動時手機上的地圖就能夠顯示所在位置。
5.地圖移動，需要監聽canvas的touchmove事件。
獲取元素內有乙個手指，執行移動方法。
元素內有兩個手指，執行地圖縮放方法
寫的比較粗糙，只提供乙個思路吧
效果頁
canvas在手機端模糊的處理
最近在做專案時用到了canvas做趨勢圖，結果畫出來的趨勢圖在模擬器上是清晰的，但放到手機上卻是非常模糊。所以在網上收集了資料，因為裝置畫素和css畫素不一致，而我們用canvas畫圖用的是css畫素，導致在手機上顯示時，canvas被拉伸了，所以導致了canvas的模糊。對於這種情況，我們只要保證...
利用 canvas 實現簽名效果
利用 canvas 實現簽名效果 使用外掛程式 jsignature github 如果再h5 中使用需要載入 flashcanvas.js 方法名稱 使用方法 說明clear jsignature clear 清空並重置畫布 getdata jsignature getdata base30 將畫...
利用http server進行手機頁面除錯
命令列 http server c 1 開啟本地網頁伺服器，如下 同wifi下，用手機訪問 192的 即可進入網頁頁面 手機上不能像在網頁上一樣直接使用console.log進行除錯，可以尋找替代方案 先利用alert 確定出錯 區域，然後利用alert 結合onerror進行錯誤除錯 window...