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

HTML5_05之SVG扩展、地理定位、拖放的更多相关文章

  1. HTML5——拖放 地理定位 视频 音频 新的input类型

    拖放 ————>   设置元素为可拖放 拖动什么 放到何处 进行放置 实例[来回拖放] 地理定位 使用地理定位 处理错误和拒绝 在地图中显示结果 基于脚本的交互式地图 给定位置的信息 用户移动时 ...

  2. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  3. 【iOS】7.4 定位服务->2.1.3.1 定位 - 官方框架CoreLocation 功能1:地理定位

    本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...

  4. 从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. 基于浏览器的HTML5地理定位

    基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...

  6. JS新API标准 地理定位（navigator.geolocation）/////////zzzzzzzzzzz

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

  7. JS新API标准 地理定位（navigator.geolocation）

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

  8. HTML5 十大新特性(六)——地理定位

    简单地用一句话概括就是,使用js获取浏览器当前所在的地理坐标,实现LBS(Location Based Service,基于定位的服务). 下面写一下它的基本调用: if(navigator.geol ...

  9. 【温故而知新-Javascript】使用地理定位

    地理定位(Geolocation)API让我们可以获取用户当前地理位置的信息(或者至少是正在运行浏览器的系统的位置).它不是HTML5规范的一部分,但经常被归组到与HTML5相关的新功能中. 1. 使 ...

随机推荐

  1. C# 文章导航

    1. C#相关文章 1.1 C# 基础(一) 访问修饰符.ref与out.标志枚举等等 1.2 C# 基础(二) 类与接口 1.3 C# DateTime日期格式化 1.4 C# DateTime与时 ...

  2. 通过ProGet搭建一个内部的Nuget服务器

    .NET Core项目完全使用Nuget 管理组件之间的依赖关系,Nuget已经成为.NET 生态系统中不可或缺的一个组件,从项目角度,将项目中各种组件的引用统统交给NuGet,添加组件/删除组件/以 ...

  3. Dapper逆天入门~强类型，动态类型，多映射，多返回值，增删改查+存储过程+事物案例演示

    Dapper的牛逼就不扯蛋了,答应群友做个入门Demo的,现有园友需要,那么公开分享一下: 完整Demo:http://pan.baidu.com/s/1i3TcEzj 注 意 事 项:http:// ...

  4. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  5. Hive on Spark安装配置详解（都是坑啊）

    个人主页:http://www.linbingdong.com 简书地址:http://www.jianshu.com/p/a7f75b868568 简介 本文主要记录如何安装配置Hive on Sp ...

  6. MySQL碎碎念

    1. 如何修改Mysql的用户密码 mysql> update mysql.user set password=password('hello') where user='root'; mysq ...

  7. JS继承类相关试题

    题目一: //有关于原型继承的代码如下:function Person(name) {   this.name = name;}Person.prototype = {     getName : f ...

  8. 【Reading Note】Python读书杂记

    赋值 >>> list=[] >>> app=[list,list,list] >>> app [[], [], []] >>> ...

  9. Phantomjs+Nodejs+Mysql数据抓取（2.抓取图片）

    概要 这篇博客是在上一篇博客Phantomjs+Nodejs+Mysql数据抓取(1.抓取数据) http://blog.csdn.net/jokerkon/article/details/50868 ...

  10. Maven 整合FreeMarker使用

    pom.xml <!-- freemarker jar --> <dependency> <groupId>org.freemarker</groupId&g ...