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=jspopular
6、HTML新特性——拖放API（Drag & Drop）：
①被拖动对象——源对象（source）触发事件：
ondragstart——拖动开始；ondrag——拖动中；ondragend——拖动结束；
②可拖着进入并松手的对象——目标对象（target）触发事件：
ondragenter——拖着进入上方；ondragover——拖着在上方悬停；ondrop——松开；ondragleave——拖动着离开；
③ondragover事件后续默认行为是ondragleave，即ondragover后默认必然触发ondragleave，使用时须阻止浏览器此默认行为；
HTML5_05之SVG扩展、地理定位、拖放的更多相关文章
- HTML5——拖放 地理定位 视频 音频 新的input类型
拖放 ————> 设置元素为可拖放 拖动什么 放到何处 进行放置 实例[来回拖放] 地理定位 使用地理定位 处理错误和拒绝 在地图中显示结果 基于脚本的交互式地图 给定位置的信息 用户移动时 ...
- H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位
今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry="" cx="" cy="" ...
- 【iOS】7.4 定位服务->2.1.3.1 定位 - 官方框架CoreLocation 功能1:地理定位
本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...
- 从零开始学 Web 之 HTML5（三）网络监听，全屏，文件读取，地理定位接口，应用程序缓存
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 基于浏览器的HTML5地理定位
基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...
- JS新API标准 地理定位（navigator.geolocation）/////////zzzzzzzzzzz
在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...
- JS新API标准 地理定位（navigator.geolocation）
在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...
- HTML5 十大新特性(六)——地理定位
简单地用一句话概括就是,使用js获取浏览器当前所在的地理坐标,实现LBS(Location Based Service,基于定位的服务). 下面写一下它的基本调用: if(navigator.geol ...
- 【温故而知新-Javascript】使用地理定位
地理定位(Geolocation)API让我们可以获取用户当前地理位置的信息(或者至少是正在运行浏览器的系统的位置).它不是HTML5规范的一部分,但经常被归组到与HTML5相关的新功能中. 1. 使 ...
随机推荐
- Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- VisualVM通过jstatd方式远程监控远程主机
配置好权限文件 [root@test bin]# cd $JAVA_HOME/bin [root@test bin]# vim jstatd.all.policy grant codebase &qu ...
- javascript单元测试框架mochajs详解
关于单元测试的想法 对于一些比较重要的项目,每次更新代码之后总是要自己测好久,担心一旦上线出了问题影响的服务太多,此时就希望能有一个比较规范的测试流程.在github上看到牛逼的javascript开 ...
- 源码分析netty服务器创建过程vs java nio服务器创建
1.Java NIO服务端创建 首先,我们通过一个时序图来看下如何创建一个NIO服务端并启动监听,接收多个客户端的连接,进行消息的异步读写. 示例代码(参考文献[2]): import java.io ...
- [原] KVM 虚拟化原理探究（2）— QEMU启动过程
KVM 虚拟化原理探究- QEMU启动过程 标签(空格分隔): KVM [TOC] 虚拟机启动过程 第一步,获取到kvm句柄 kvmfd = open("/dev/kvm", O_ ...
- spring无法读取properties文件数据
只讲述异常点,关于怎么配置文件,这里不做说明. 1. controller中无法读取config.properties文件 controller中注入的@Value配置是从servlet-cont ...
- iOS开发 判断当前APP版本和升级
从iOS8系统开始,用户可以在设置里面设置在WiFi环境下,自动更新安装的App.此功能大大方便了用户,但是一些用户没有开启此项功能,因此还是需要在程序里面提示用户的 方法一:在服务器接口约定对应的数 ...
- jira的插件开发流程实践
怎么开头呢,由于自己比较懒,博客一直不怎么弄,以后克己一点,多传点自己遇到的问题和经历上来,供自己以后记忆,也供需要的小伙伴少走点弯路吧 最近公司项目需要竞标一个运维项目,甲方给予了既定的几种比较常用 ...
- Openfire的启动过程与session管理
说明 本文源码基于Openfire4.0.2. Openfire的启动 Openfire的启动过程非常的简单,通过一个入口初始化lib目录下的openfire.jar包,并启动一个 ...
- XSS 前端防火墙 —— 无懈可击的钩子
昨天尝试了一系列的可疑模块拦截试验,尽管最终的方案还存在着一些兼容性问题,但大体思路已经明确了: 静态模块:使用 MutationObserver 扫描. 动态模块:通过 API 钩子来拦截路径属性. ...