HTML5_05之SVG扩展、地理定位、拖放
编程爱好者联盟 2016-11-14
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，使用时须阻止浏览器此默认行为；
