SVG
svg與canvas的區(qū)別
? ? canvas繪制的是位圖， svg繪制的是矢量圖
? ? canvas使用JavaScript進(jìn)行繪制雄坪； svg使用XML進(jìn)行繪制
? ? canvas無(wú)法給每個(gè)圖形綁定事件； svg可以給每個(gè)圖形綁定事件
? ? 兼容性不同檩咱。 svg的兼容性更好
? ? 應(yīng)用領(lǐng)域不同
svg的應(yīng)用領(lǐng)域
? ? 圖標(biāo)
? ? 地圖
XML
? ? 可擴(kuò)展標(biāo)記語(yǔ)言
svg的使用
? ? 在html中 使用<svg>
? ? 獨(dú)立的svg文件拗胜，html中引用
地理定位
? ? navigator.geolocation
? ? ? ? getCurrentPosition(successCallback, errorCallback, options)
? ? ? ? watchPosition(successCallback, errorCallback, options)
? ? ? ? clearWatch(wid)
? ? position 成功回調(diào)函數(shù) 自動(dòng)獲取
? ? ? ? coords
? ? ? ? latitude 緯度
? ? ? ?longitude 經(jīng)度
? ? ? ?altitude 海拔
? ? ? ?heading 前進(jìn)方向
? ? ? ?speed 速度
? ? ? ?accuracy 坐標(biāo)精度
? ? ? ?altitudeAccuracy 海拔精度
? ? timestamp
errorPosition 失敗回調(diào)函數(shù) 自動(dòng)獲取
? ? code
? ? message
注意
? ? ? ? chrome\firefox 等大部分瀏覽器 需要 https的網(wǎng)頁(yè)才能獲取位置
多媒體操作
DOM 方法
? ? * play()
? ? * pause()
DOM 屬性
? ? * volume
? ? * muted
DOM 事件
? ? * playing
? ? * play
? ? * psuse
? ? * ....
拖放
? ? 屬性
? ? ? ? draggable true/false
? ? 事件
? ? ? ? dragstart 被拖拽元素 拖拽開(kāi)始
? ? ? ? drag 被拖拽元素 拖拽過(guò)程中不停的觸發(fā)
? ? ? ? dragend 被拖拽元素 拖拽結(jié)束
? ? ? ? dragenter 目標(biāo)元素 被拖拽元素進(jìn)入目標(biāo)元素 設(shè)置樣式
? ? ? ? dragleave 目標(biāo)元素 被拖拽元素離開(kāi)目標(biāo)元素 設(shè)置樣式
? ? ? ?dragover 目標(biāo)元素 被拖拽元素在目標(biāo)元素內(nèi)的時(shí)候不停觸發(fā)。 取消時(shí)間默認(rèn)操作event.preventDefault()
drop 目標(biāo)元素 當(dāng)被拖拽元素在目標(biāo)元素內(nèi)放下的時(shí)候垒酬。
dragevent
dragevent.dataTransfer
