HTML5新特性： 优先级
(1)新的标签和属性 10
(2)表单新特性 7
(3)视频和音频 9
(4)Canvas绘图——位图 10
(5)SVG绘图——矢量图 10
svg、rect、circle、ellipse、line、polyline、polygon、text、image、path
(6)地理定位 2
(7)拖放API 5
(8)WebWorker 4
(9)WebStorage 10
(10)WebSocket 3
今日目标：
(1)地理定位 —— 了解
(2)拖放API —— 稍难&掌握
1.补充：第三方绘图工具库的使用——Two.js
(1)找到官网，看官方的定义
https://two.js.org/
Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.
是一个2D绘图函数库，用于浏览器，底层可以是SVG、Canvas或WebGL。
(2)找示例程序，写出demo
(3)使用API Document，编写自己的应用
上述代码完成则“获得工作”！
2.HTML5新特性之六 —— 地理定位
Geolocation：用于获得当前浏览器所在的地理坐标，从而提供LBS（Location Based Service），如送餐、打车、导航。包括如下数据：
经度： longitude
纬度： latitude
海拔高度： altitude
速度： speed
浏览器如何获得上述数据：
(1)手机浏览器：
首先尝试使用内置GPS数据——精度以米为单位
再则使用手机基站编号反向推导出对应的地理位置——定位精度以公里为单位
(2)PC浏览器：
通过电脑的IP地址反向查询——精度以公里为单位
HTML5中如何获取浏览器所在的地理定位信息：
window.navigator.geolocation {
getCurrentPosition: fn //获取当前定位数据
watchPosition: fn //监视定位数据
clearWatch: fn //清除定位监视
}
演示：如何获取当前的定位信息：
navigator.geolocation.getCurrentPosotion(
function(pos){
console.log('定位数据获取成功');
//pos.coords.longtitude ....
},
function(err){
console.log('定位数据获取失败');
//err.code err.message
}
)
2.课外扩展：使用百度地图API——第三方地图的使用
(1)打开官网，找定义，功能说明
http://lbsyun.baidu.com/
可以基于百度地图进行Android、iOS、Web应用开发
http://lbsyun.baidu.com/index.php?title=jspopular
(2)找示例程序
(3)找API文档，编写自己的应用
使用百度地图API步骤：
(1)注册百度开发者账号
(2)使用开发者账号申请创建一个Web应用账号，获取一个访问百度地图的密钥（AccessKey）
http://lbsyun.baidu.com/apiconsole/key
(3)编写HTML网页，出示当前网站的访问密钥，调用百度地图API
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的网站在百度地图申请的访问秘钥 ">
</script>
//创建地图实例
var map = new BMap.Map("container");
//创建一个指定的点 —— 文博大厦
var p = new BMap.Point(116.300982,39.915907);
//以指定点为中心显示地图
map.centerAndZoom(p, 17);
4.HTML5新特性之七 —— 拖放API —— 稍难&掌握
Drag：拖动
Drop：释放
在HTML5之前只能使用鼠标事件模拟出“拖放”效果；HTML5专门为拖放提供了7个事件句柄。
被拖动的源对象可以触发的事件：
(1)ondragstart：源对象开始被拖动
(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend：源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件：
(1)ondragenter：目标对象被源对象拖动着进入
(2)ondragover：目标对象被源对象拖动着悬停在上方
(3)ondragleave：源对象拖动着离开了目标对象
(4)ondrop：源对象拖动着在目标对象上方释放/松手
注意：必须组织dragover事件的默认行为，才可能触发drop事件！
练习：
(1)实现一个可以随着鼠标拖动而移动的小飞机
提示：飞机必须绝对定位；ondrag事件处理中获取事件发生的坐标值。
(2)拖动着某个小飞机到垃圾桶上方时，垃圾桶由半透明变为不透明；当拖动着离开 或 在上方释放 垃圾桶又变为半透明；
(3)总共显示三个小飞机，拖动着某个小飞机到垃圾桶上方后，小飞机从DOM树上删除
5.如何在拖动的源对象事件和目标对象事件间传递数据
HTML5为所有的拖动相关事件提供了一个新的属性：
e.dataTransfer { //数据传递对象——作用相当于拖拉机
}
用于在源对象和目标对象的事件间传递数据，
源对象上的事件处理中保存数据：
e.dataTransfer.setData( k, v ); //k-v必须都是string
目标对象上的事件处理中读取数据：
var v = e.dataTransfer.getData( k );
课后练习： 英雄选择
要求：
拖动某架飞机到目标区域，则在上方显示出该飞机；下方该飞机图消失；替换选中区域已有的飞机。
拖动另一架飞机到目标区域，则显示出该飞机，之前选中的飞机变为重新回到待选区域。
