首页 > 代码库 > HTML5 5
HTML5 5
复习：
HTML5新特性
1.新的语义标签
2.表单2.0
3.视频和音频
4.Canvas绘图
5.SVG绘图
6.地理定位
7.拖放API
8.WebWorker
9.WebStorage
10.WebSocket
SVG的使用：
<svg width="" height="">
绘制矩形
<rect width="" height="" x="" y=""></rect>
绘制圆形
<circle r="" cx="" cy=""></circle>
绘制椭圆
<ellipse rx="" ry="" cx="" cy=""></ellipse>
绘制直线
<line x1="" y1="" x2="" y2="" stroke=""></line>
绘制折线
<polyline points="x1,y1 x2,y2 x3,y3 ... "></polyline>
绘制多边形
<polygon points="x1,y1 x2,y2 x3,y3 ..." ></polygon>
绘制文本
<text x="" y="" font-size="" fill="url(#g3)">文本</text>
绘制图像
<image xlink:href="" width="" height=""></image>
贝塞尔路径
<path points=""></path>
特效对象
<defs>
<linearGradient id="g3" x1="" y1="" x2="" y2="">
<stop offset="" stop-color="" stop-opacity=""></stop>
<stop offset="" stop-color="" stop-opacity=""></stop>
</linearGradient>
</defs>
</svg>
今日目标：
(1)补充：SVG相关小知识点
(2)地理定位——掌握
(3)拖放API——重点&小难点
1.SVG中定义特效对象——渐变特效
2.SVG中定义特效对象——滤镜(filter)——高斯模糊路径
<defs>
<filter id="f1">
<feGaussionBlur stdDeviation="3">
</filter>
</defs>
<text filter="url(#f1)">
更多滤镜效果及使用方法：
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter
前端领域中可用的绘图技术：
(1)Canvas —— 2D位图
(2)SVG —— 2D矢量图
(3)WebGL —— 2D/3D图
绘制统计图，可以选用上述任意一种！但三种技术可供调用的代码不一样！
3.第三方绘图工具库——Two.js —— 了解&重点在自学过程
(1)看官网，找介绍
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.
提供了一套统一的接口，可用于在svg、canvas、webgl中实现常见图形的绘制，如矩形、三角形、圆形.....
不足：为了兼容三种技术，必须舍弃某个技术所专有的效果；效率上有待提高。
(2)找示例，写Demo
(3)查API Document，在项目中加以应用
4.HTML5新特性之六——地理定位
地理定位：使用JS获取浏览器当前所在的地理坐标，实现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.getCurrentPosition(
funcntion(pos){
console.log(‘定位成功‘);
}, function(err){
console.log(‘定位失败‘);
}
)
5.如何在页面中使用百度地图 —— 扩展小知识
从map.baidu.com下点击“地图开放平台”：
目前官网： http://lbsyun.baidu.com/
JS-API使用手册： http://lbsyun.baidu.com/index.php?title=jspopular
第三方工具的学习步骤：
(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);
6.HTML5新特性之七 —— 拖放API —— 重点&小难点
Drag：拖动
Drop：释放
在HTML5之前只能使用鼠标事件模拟出“拖放”效果；HTML5专门为拖放提供了7个事件句柄。
(1)拖动的源对象(source)可以触发的事件：
dragstart：拖动开始
drag：拖动进行中
dragend：拖动结束
源对象的拖动过程：dragstart x 1 + drag x n + dragend x 1
练习：实现一个可以随着鼠标拖动而移动的小飞机
(2)拖动的目标对象(target)可以触发的事件：
dragenter：拖动着进入
dragover：拖动着在目标对象上方
dragleave：拖动着离开
drop：松手/释放/松开
目标对象的进入/离开过程：
dragenter x 1 + dragover x n + dragleave x 1
目标对象的进入/释放过程：
dragenter x 1 + dragover x n + drop x 1
注意：必须阻止dragover的默认行为！否则drop事件无法触发！
练习：
(1)垃圾桶初始时半透明；拖动小飞机进入垃圾桶变为不透明，离开后重新半透明，在垃圾桶上方松手也变为半透明。
提示：需要用到目标对象的四个事件
(2)一个垃圾桶，下方有一个容器(div#container)，其中有三个小飞机，拖动某个小飞机到垃圾桶上方，则容器中删除此小飞机
提示：需要用到源对象和目标对象的多个事件
7.如何在拖动的源对象和目标对象间传递数据
如何在7个事件间传递数据？
源对象事件——3个：
目标对象事件——4个：
(1)方法一：使用全局变量 —— 全局对象污染
(2)方法二：使用拖放事件对象的dataTransfer属性
说明：dataTransfer，用作数据传递/转移，看作“拖拉机”
源对象触发事件时保存k-v数据：
src.onxxx = function(e){
e.dataTransfer.setData( ‘key‘, ‘value‘ );
}
目标对象触发事件时获取k-v数据：
target.onxxx = function(e){
var value = http://www.mamicode.com/e.dataTransfer.getData( ‘key‘ )
}
课后练习： 英雄选择
要求：
拖动某架飞机到目标区域，则在上方显示出该飞机；下方该飞机图消失；替换选中区域已有的飞机。
拖动另一架飞机到目标区域，则显示出该飞机，之前选中的飞机变为重新回到待选区域。
HTML5 5