HTML5_05之SVG扩展、地理定位、拖放 - Jupiter258_H5之家

1、SVG绘图总结：
①方法一：已有svg文件，<img src="x.svg">
  方法二：<body><svg></svg></body>
②绘制矩形：<rect x="" y=""></rect>
③绘制圆形：<circle cx="" cy="" r=""></circle>
④绘制椭圆：<ellipse cx="" cy="" rx="" ry=""></ellipse>
⑤绘制直线：<line x1="" y1="" x2="" y2=""></line>
⑥绘制折线：<polyline points="x1,y1 x2,y2 ..."></polyline>
⑦绘制多边形：<polygon points="x1,y1 x2,y2 ..."></polygon>
⑧绘制文本：<text x="" y="" font-size="">XXX</text>
⑨绘制图像：<image xlink:href=""></image>
⑩使用渐变：
linearGradient：线性渐变；
<svg>
  <defs>
   <linearGradient x1="" y1="" x2="" y2="">
    <stop offset="0" stop-color="" stop-opacity="">
   </linearGradient>
  </defs>
  <rect fill="url(#g1)" stroke="url(#g1)"></rect>
</svg>
2、SVG滤镜（filter）——对图像进行像素化处理：
feGaussianBlur：高斯模糊滤镜；
<defs>
  <filter>
   <feGaussianBlur stdDeviation="5"></feGaussianBlur>
  </filter>
  <rect filter="url(#f1)"></rect>
</defs>
3、第三方绘图工具库——Two.js：
<div></div>
<script src="js/two.js"></script>
<script>
  var two=new Two({}).appendTo(container);
  two.makeCircle(...);
  two.makeRectangle(...);
  //two.update();
  //two.play();
</script>
4、HTML5新特性——地理定位：
①window.navigator.geolocation：获取当前浏览器所在的地理位置；
经度——longitude；维度——latitude；海拔——altitude；速度——speed；
②手机使用内置GPS模块或是信号基站，PC使用IP地址反向解析；
③浏览器地理定位涉及个人隐私，询问权限：
  navigator.geolocation{
   getCurrentPosition:fn,//一次性获取定位信息
   watchPosition:fn,//周期性监视定位信息
   clearWatch:fn//清除定位监视器
  }
④使用：
  navigator.geolocation.getCurrentPosition(
   function(pos){//获取成功
    console.log(pos.coords.longtude);//经度
    console.log(pos.coords.latitude);//维度
    console.log(pos.coords.altitude);//海拔
    console.log(pos.coords.speed);//速度
   }
   function(err){//获取失败
    console.log(err.code);
    console.log(err.message);
   }
  );
5、调用百度地图API：
查看使用JS调用百度地图说明文档——?title=jspopular
6、HTML新特性——拖放API（Drag & Drop）：
①被拖动对象——源对象（source）触发事件：
  ondragstart——拖动开始；ondrag——拖动中；ondragend——拖动结束；
②可拖着进入并松手的对象——目标对象（target）触发事件：
  ondragenter——拖着进入上方；ondragover——拖着在上方悬停；ondrop——松开；ondragleave——拖动着离开；
③ondragover事件后续默认行为是ondragleave，即ondragover后默认必然触发ondragleave，使用时须阻止浏览器此默认行为；