H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

今天的目标

3.1:h5新特性--SVG--椭圆

<ellipse rx="" ry=""  cx="" cy=""></ellipse>

rx:水平半径

ry:垂直半径

3.2:h5新特性--SVG--直线

<line x1 y1 x2 y2 stroke></line>

练习:使用SVG 中的直线绘制如下图标(汉堡包)

3.3:h5新特性--SVG--折线  (一条折线上可以有任意多个点)

<polyline points="50,50 10,50 .." fill="transparent"

stroke="#000"></polyline>

3.4:h5新特性--SVG--文本

<text font-size="" fill="" stroke="" x= y=>文本内容</text>

练习:使用折线绘制五角星

3.5:h5新特性--SVG--渐变对象

<defs> 定义特效对象:渐变对象属于一种特效对象

<linearGradient  id="g3" x1="" y1="" x2="" y2="">

<stop offset="" stop-color="red" stop-opacity=""/>

<stop offset="" stop-color="red" stop-opacity=""/>

</ linearGradient >

<defs>

<ANY fill="url(#g3)" stroke="url(#g3)"></ANY>

练习:创建三个柱子,使用渐变对象，为不同的柱子分配不同

渐变对象

3.6:h5新特性--SVG--滤镜(高斯滤镜--模糊)

<defs>

<filter  id="f2">

<feGaussianBlur stdDeviation="3" />

</filter>

</defs>

<ANY filter="url(#f2)" >

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

3.7:h5新特性--地理定位

Geolocation:地理定位,使用js获取当前浏览器所在地理坐标(经度,纬度,海拨,速度)数据，用于实现(Location Based Service)

如饿了么,高德导航...

手机浏览器如何获取定位信息

(1)首选手机中的GPS芯片通信，定位精度在米

(2)次选手机通信基站进行定位获取

PC浏览器如何获取定位信息

(1)通过ip地址解析

h5中提供了一个新对象,用于获取当前浏览器定位信息

window.navigator.geolocation{

getCurrentPosition:fn,   获取当前定位信息

watchPostion:fn,

cleaearWatch:fn

}

国内第三方服务商(百度地图/腾讯地图)

#在网页中嵌入百度地图

(1)注册百度开发者帐户(手机号)

http://lbsyun.baidu.com/

(2)创建一个网站，登录百度地图，为网站申请

AccessKey

(3)在自己网页中嵌入百度提供API

3.8:h5新特性--拖放API

Drag & Drop  拖动和释放

HTML5中为拖放操作提供7个事件,分两组

拖动源对象:(会动)

dragstart   拖动开始

drag       拖动中

dragend    拖动结束

拖动目标对象:(不动)

dragenter  拖动进入

dragover   拖动悬停

dragleave  拖动离开

drop      在上方释放

注意：必须阻止dragover的默认行为，drop才可触发

练习:使用拖动源对象提供事件,实现"可以随鼠标拖动而移动小飞机"

提示:父元素相对定位，子元素绝对定位，飞机移动，就是修改top/left属性，拖动事件可以取到相对整个页面左上偏移量e.pageX/pageY

练习:使用拖动事件，源对象和目标对象可能触发7个事件，实现“拖动删除效果”

提示:在刚开始拖动时 src.ondragstart记录拖动源对象

的id,释放时target.ondrtop根据此id找到源对象,

执行删除 div.removeChild(c);