HTML5_0五之SVG扩张、地理定位、拖放

一、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=”” y壹=”” x二=”” y二=””></line>
 6制图折线:<polyline points=”x一,y1 x二,y二 …”></polyline>
 7制图多边形:<polygon points=”x壹,y一 x二,y二 …”></polygon>
 捌绘制文本:<text x=”” y=”” font-size=””>XXX</text>
 9绘制图像:<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>
二、SVG滤镜(filter)——对图像进行像素化管理:
 feGaussianBlur:高斯模糊滤镜;
 <defs>
  <filter id=”f1″>
   <feGaussianBlur stdDeviation=”5″></feGaussianBlur>
  </filter>
  <rect filter=”url(#f1)”></rect>
 </defs>
三、第一方绘图工具库——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新特征——地理定位:
 1window.navigator.geolocation:获取当前浏览器所在的地理地点;
 经度——longitude;维度——latitude;海拔——altitude;速度——speed;
 二手提式有线电话机使用内置GPS模块或是时域信号基站,PC使用IP地址反向解析;
 叁浏览器地理定位涉及个人隐衷,询问权限:
  navigator.geolocation{
   getCurrentPosition:fn,//1遍性得到一定音信
   watchPosition:fn,//周期性监视定位音信
   clear沃特ch: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);
   }
  );
伍、调用百度地图API:
 查看使用JS调用百度地图表达文档——http://lbsyun.baidu.com/index.php?title=jspopular
6、HTML新特性——拖放API(Drag & Drop):
 壹被拖动对象——源对象(source)触发事件:
  ondragstart——拖动开始;ondrag——拖动中;ondragend——拖动截至;
 2可拖着进入并放开的靶子——指标对象(target)触发事件:
  ondragenter——拖着进入上方;ondragover——拖着在上方悬停;ondrop——松手;ondragleave——拖动着距离;
 三ondragover事件后续私下认可行为是ondragleave,即ondragover后私下认可必然触发ondragleave,使用时须阻止浏览器此私下认可行为;

一、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>
 5制图直线:<line x1=”” y壹=”” x二=”” y贰=””></line>
 6绘制折线:<polyline points=”x1,y一 x二,y贰 …”></polyline>
 7制图多边形:<polygon points=”x一,y一 x二,y二 …”></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>
二、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>
肆、HTML五新特征——地理定位:
 1window.navigator.geolocation:获取当前浏览器所在的地理地点;
 经度——longitude;维度——latitude;海拔——altitude;速度——speed;
 二手机使用内置GPS模块或是数字信号基站,PC使用IP地址反向解析;
 三浏览器地理定位涉及个人隐秘,询问权限:
  navigator.geolocation{
   getCurrentPosition:fn,//1遍性得到一定消息
   watchPosition:fn,//周期性监视定位音信
   clear沃特ch: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,使用时须阻止浏览器此暗中同意行为;

相关文章