HTML5新增API

canvas

• 可视化数据
• 特效 banner
• 游戏
• 模拟器(在线PS、在线编辑器)
• 地图

SVG

定义

矢量图工具， 绘图
SVG在H5标准之前就有了， IE对SVG的兼容性非常好

svg与canvas区别

• canvas位图， svg是矢量图
• canvas使用JavaScrpt绘图， svg使用XML来绘图
• canvas不支持事件（借助库） svg支持事件

svg的应用领域

• 矢量图标
• 地图

SVG的使用

• <svg>
• <rect>
• <circle>
• <line>
• <path>
• <ellipse>
• <polygon>
• .....

HTML中使用SVG

• 在html中直接写 <svg>
• <embed src="" type="image/svg+xml" width="" height="">
• <object data="" type="image/svg+xml" width="" height="">
• <iframe src="">

地理定位 geolocation

navigator.gentlocation

• getCurrentPosition(successCallback, errorCallback, options) 获取当前的地理位置
• watchPosition(successCallback, errorCallback, options) 监听地理位置变化
• clearWatch() 停止位置监听

position对象

获取位置成功会调用 successCallback回调函数， 自动接收position对象

• coords

  • longitude 维度
  • latitude 精度
  • altitude 海拔
  • handing 前进方向
  • speed 速度
  • altitudeAccuracy 海拔经度
  • accuracy 坐标经度

• timestamp 时间戳

error对象

获取位置失败，调用errorCallback回调，调用 error对象

• code 错误代码
• message 错误信息

选项 options

• timeout 超时时间
• enableHighAccuracy 是否最优
• maxmunAge 最大缓存时间

注意

• chrome浏览器只有在https方式下打开的网页才能获取地理位置
• 手上上的大部分浏览器，微信 也要求https 才能获取位置

多媒体

相关标签

• <video> 视频
• <audio> 音频
• <source>
• <track>

DOM(video/audio)

• 属性
  • volume 音量
  • muted 是否静音
  • ....
• 方法
  • play()
  • pause()
  • .....
• 事件
  • onplay
  • ....

视频插件

• ckplayer
• jplayer
• flowplayer
• video.js
• flv.js

拖拽

属性

• draggable 设置为true 元素就可以被拖拽

事件

• ondrag
• ondragstart
• ondragend
• ondragenter
• ondragleave
• ondragover
• ondrop

dataTransfer

• 获取 是dragEvent的属性
• getData()
• setData()

---

附录

• 百度地图APIKey： B8cfd1501ae7f7c55dc3793ee989c354
• 视频地址：
  • http://movie.ks.js.cn/flv/other/1_0.mp4
  • http://movie.ks.js.cn/flv/other/1_0.flv
• 常用视频播放插件：
  • ckplayer
  • jplayer
  • flowplayer
  • video.js
  • flv.js

XML HTML XHTML

• HTML 超文本标记语言 最新版本5
• XHTML 可扩展超文本标记语言
• XML 可扩展标记语言 用来传输和存储数据
• JSON 数据格式 用来传输和存储数据