你的位置:首页 > 网页设计

[网页设计]HTML5_05之SVG扩展、地理定位、拖放


1、SVG绘图总结:
 ①方法一:已有svg文件,<img src="x.svg">
  方法二:<body><svg></svg></body>
 ②绘制矩形:<rect x="" y="" width="" height=""></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 id="g1" 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 id="f1">
   <feGaussianBlur stdDeviation="5"></feGaussianBlur>
  </filter>
  <rect filter="url(#f1)"></rect>
 </defs>
3、第三方绘图工具库——Two.js:
 <div id="container"></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调用百度地图说明文档——http://lbsyun.baidu.com/index.php?title=jspopular
6、HTML新特性——拖放API(Drag & Drop):
 ①被拖动对象——源对象(source)触发事件:
  ondragstart——拖动开始;ondrag——拖动中;ondragend——拖动结束;
 ②可拖着进入并松手的对象——目标对象(target)触发事件:
  ondragenter——拖着进入上方;ondragover——拖着在上方悬停;ondrop——松开;ondragleave——拖动着离开;
 ③ondragover事件后续默认行为是ondragleave,即ondragover后默认必然触发ondragleave,使用时须阻止浏览器此默认行为;