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