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=jspopular6、HTML新特性——拖放API(Drag & Drop): ①被拖动对象——源对象(source)触发事件:  ondragstart——拖动开始;ondrag——拖动中;ondragend——拖动结束; ②可拖着进入并松手的对象——目标对象(target)触发事件:  ondragenter——拖着进入上方;ondragover——拖着在上方悬停;ondrop——松开;ondragleave——拖动着离开; ③ondragover事件后续默认行为是ondragleave,即ondragover后默认必然触发ondragleave,使用时须阻止浏览器此默认行为;

相关推荐