SVG

svg與canvas的區(qū)別

? ? canvas繪制的是位圖， svg繪制的是矢量圖

? ? canvas使用JavaScript進(jìn)行繪制； svg使用XML進(jìn)行繪制

? ? canvas無法給每個圖形綁定事件； svg可以給每個圖形綁定事件

? ? 兼容性不同。 svg的兼容性更好

? ? 應(yīng)用領(lǐng)域不同

svg的應(yīng)用領(lǐng)域

? ? 圖標(biāo)

? ? 地圖

XML

? ? 可擴(kuò)展標(biāo)記語言

svg的使用

? ? 在html中 使用<svg>

? ? 獨(dú)立的svg文件，html中引用

地理定位

? ? navigator.geolocation

? ? ? ? getCurrentPosition(successCallback, errorCallback, options)

? ? ? ? watchPosition(successCallback, errorCallback, options)

? ? ? ? clearWatch(wid)

? ? position 成功回調(diào)函數(shù) 自動獲取

? ? ? ? coords

? ? ? ? latitude 緯度

? ? ? ?longitude 經(jīng)度

? ? ? ?altitude 海拔

? ? ? ?heading 前進(jìn)方向

? ? ? ?speed 速度

? ? ? ?accuracy 坐標(biāo)精度

? ? ? ?altitudeAccuracy 海拔精度

? ? timestamp

errorPosition 失敗回調(diào)函數(shù) 自動獲取

? ? code

? ? message

注意

? ? ? ? chrome\firefox 等大部分瀏覽器 需要 https的網(wǎng)頁才能獲取位置

多媒體操作

DOM 方法

? ? * play()

? ? * pause()

DOM 屬性

? ? * volume

? ? * muted

DOM 事件

? ? * playing

? ? * play

? ? * psuse

? ? * ....

拖放

? ? 屬性

? ? ? ? draggable true/false

? ? 事件

? ? ? ? dragstart 被拖拽元素 拖拽開始

? ? ? ? drag 被拖拽元素 拖拽過程中不停的觸發(fā)

? ? ? ? dragend 被拖拽元素 拖拽結(jié)束

? ? ? ? dragenter 目標(biāo)元素 被拖拽元素進(jìn)入目標(biāo)元素 設(shè)置樣式

? ? ? ? dragleave 目標(biāo)元素 被拖拽元素離開目標(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