HTML基础第八天

复习：

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 );

课后练习： 英雄选择

要求：

拖动某架飞机到目标区域，则在上方显示出该飞机；下方该飞机图消失；替换选中区域已有的飞机。

拖动另一架飞机到目标区域，则显示出该飞机，之前选中的飞机变为重新回到待选区域。

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。