SVG
svg与canvas的区别
canvas绘制的是位图， svg绘制的是矢量图
canvas使用JavaScript进行绘制； svg使用XML进行绘制
canvas无法给每个图形绑定事件； svg可以给每个图形绑定事件
兼容性不同。 svg的兼容性更好
应用领域不同
svg的应用领域
图标
地图
XML
可扩展标记语言
svg的使用
在html中 使用<svg>
独立的svg文件，html中引用
地理定位
navigator.geolocation
getCurrentPosition(successCallback, errorCallback, options)
watchPosition(successCallback, errorCallback, options)
clearWatch(wid)
position 成功回调函数 自动获取
coords
latitude 纬度
longitude 经度
altitude 海拔
heading 前进方向
speed 速度
accuracy 坐标精度
altitudeAccuracy 海拔精度
timestamp
errorPosition 失败回调函数 自动获取
code
message
注意
chrome\firefox 等大部分浏览器 需要 https的网页才能获取位置
多媒体操作
DOM 方法
* play()
* pause()
DOM 属性
* volume
* muted
DOM 事件
* playing
* play
* psuse
* ....
拖放
属性
draggable true/false
事件
dragstart 被拖拽元素 拖拽开始
drag 被拖拽元素 拖拽过程中不停的触发
dragend 被拖拽元素 拖拽结束
dragenter 目标元素 被拖拽元素进入目标元素 设置样式
dragleave 目标元素 被拖拽元素离开目标元素 设置样式
dragover 目标元素 被拖拽元素在目标元素内的时候不停触发。 取消时间默认操作event.preventDefault()
drop 目标元素 当被拖拽元素在目标元素内放下的时候。
dragevent
dragevent.dataTransfer
