HTML5技术

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

字号+ 作者:H5之家 来源:H5之家 2016-11-16 10:00 我要评论( )

1、SVG绘图总结: ①方法一:已有svg文件,img src="x.svg" 方法二:bodysvg/svg/body ②绘制矩形:rect x="" y=""/rect ③绘制圆形:circle cx="" cy="" r=""/circle ④绘制椭圆:ellipse cx="" cy="" rx="" ry=""/ellipse ⑤绘制直线:line x1="" y1="" x2

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,使用时须阻止浏览器此默认行为;

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5_04之SVG绘图 - Jupiter258

    HTML5_04之SVG绘图 - Jupiter258

    2016-11-15 16:00

  • HTML5_03之Canvas绘图 - Jupiter258

    HTML5_03之Canvas绘图 - Jupiter258

    2016-11-15 14:00

  • HTML5_02之视频、音频、Canvas - Jupiter258

    HTML5_02之视频、音频、Canvas - Jupiter258

    2016-11-15 13:00

  • HTML5_01之表单新特性 - Jupiter258

    HTML5_01之表单新特性 - Jupiter258

    2016-11-15 11:00

网友点评