今天的目标
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);