SVG
svg和canvas的區(qū)別
svg繪制的是矢量圖轴踱， canvas繪制的是位圖
svg使用XML來繪制圖片蔗喂， canvas使用JavaScript來繪制圖片
svg的兼容性好啄枕， canvas需要兼容H5的瀏覽器
svg可以給每個(gè)圖形綁定事件膀值， canvas不可以
svg的應(yīng)用領(lǐng)域
圖標(biāo)
地圖
繪制圖形
矩形
圓形
多邊形
路徑
.....
在HTML中使用SVG
直接在html中寫svg
地理定位
navigator.geolocation
getCurrentPosition(successCallback, errorCallback, options)
watchPosition(successCallback, errorCallback, options)
clearWatch() 結(jié)束監(jiān)聽
successPositon
coords
latitude 緯度
longitude 經(jīng)度
altitude 海拔
speed 速度
heading 前進(jìn)方向
accuracy 坐標(biāo)經(jīng)度
altitudeAccuracy 海拔經(jīng)度
timestamp 時(shí)間戳
errorPosition
code
message
選項(xiàng)
timeout 超時(shí)時(shí)間 enableHighAccuracy 是否得到最佳效果 true/false maximumAge 緩存時(shí)間
注意
chrome桶唐，filefox栅葡， 微信 等瀏覽器 要成功獲取 地理位置， 網(wǎng)頁必須使用 https 協(xié)議打開
多媒體
多媒體標(biāo)簽
DOM 屬性
volume 獲取或設(shè)置 音量
muted 是否靜音
....
DOM 方法
play() 播放
pause() 暫停
.....
DOM 事件
onplay
onpause
....
視頻插件
ckplayer falsy/h5
jplayer falsh/h5
flowplayer falsh/h5
video.js h5
flv.js flash
拖拽 API
屬性
draggable 所有的元素都有 true/false 控制元素是否可以被拖動(dòng)
事件
dragenter 綁定目標(biāo)元素 拖拽元素進(jìn)入目標(biāo)元素 用于目標(biāo)元素的樣式
dragleave 綁定目標(biāo)元素 拖拽元素離開目標(biāo)元素 同上
dragover 綁定目標(biāo)元素 拖拽元素在目標(biāo)元素上移動(dòng) 一般需要組織默認(rèn)事件 event.preventDefault();
drop 綁定目標(biāo)元素 拖拽元素放置在目標(biāo)元素 上時(shí)觸發(fā)
dragstart 綁定拖拽元素 拖拽開始
dragend 綁定拖拽元素 拖拽結(jié)束
drag 綁定拖拽元素 拖拽過程中一直觸發(fā)
dragEvent
dataTranfer 用于不同event之間的數(shù)據(jù)交換
setData（key,value）
getData(key)
作業(yè)
整理筆記
代碼 1遍
使用video/audio dom API 自定義 音樂播放器
附錄
百度地圖APIKey： B8cfd1501ae7f7c55dc3793ee989c354
視頻地址：
http://movie.ks.js.cn/flv/other/1_0.mp4
http://movie.ks.js.cn/flv/other/1_0.flv
常用視頻播放插件：
