SVG
svg和canvas的区别
svg绘制的是矢量图, canvas绘制的是位图
svg使用XML来绘制图片, canvas使用JavaScript来绘制图片
svg的兼容性好, canvas需要兼容H5的浏览器
svg可以给每个图形绑定事件, canvas不可以
svg的应用领域
图标
地图
绘制图形
矩形
圆形
多边形
路径
.....
在HTML中使用SVG
直接在html中写svg
地理定位
navigator.geolocation
getCurrentPosition(successCallback, errorCallback, options)
watchPosition(successCallback, errorCallback, options)
clearWatch() 结束监听
successPositon
coords
latitude 纬度
longitude 经度
altitude 海拔
speed 速度
heading 前进方向
accuracy 坐标经度
altitudeAccuracy 海拔经度
timestamp 时间戳
errorPosition
code
message
选项
timeout 超时时间 enableHighAccuracy 是否得到最佳效果 true/false maximumAge 缓存时间
注意
chrome,filefox, 微信 等浏览器 要成功获取 地理位置, 网页必须使用 https 协议打开
多媒体
多媒体标签
DOM 属性
volume 获取或设置 音量
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 控制元素是否可以被拖动
事件
dragenter 绑定目标元素 拖拽元素进入目标元素 用于目标元素的样式
dragleave 绑定目标元素 拖拽元素离开目标元素 同上
dragover 绑定目标元素 拖拽元素在目标元素上移动 一般需要组织默认事件 event.preventDefault();
drop 绑定目标元素 拖拽元素放置在目标元素 上时触发
dragstart 绑定拖拽元素 拖拽开始
dragend 绑定拖拽元素 拖拽结束
drag 绑定拖拽元素 拖拽过程中一直触发
dragEvent
dataTranfer 用于不同event之间的数据交换
setData(key,value)
getData(key)
作业
整理笔记
代码 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
常用视频播放插件: