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. 使 ...
随机推荐
- C#与C++的发展历程第三 - C#5.0异步编程巅峰
系列文章目录 1. C#与C++的发展历程第一 - 由C#3.0起 2. C#与C++的发展历程第二 - C#4.0再接再厉 3. C#与C++的发展历程第三 - C#5.0异步编程的巅峰 C#5.0 ...
- ASP.NET Core应用针对静态文件请求的处理[2]: 条件请求与区间请求
通过调用ApplicationBuilder的扩展方法UseStaticFiles注册的StaticFileMiddleware中间件帮助我们处理针对文件的请求.对于StaticFileMiddlew ...
- Oracle数据库该如何着手优化一个SQL
这是个终极问题,因为优化本身的复杂性实在是难以总结的,很多时候优化的方法并不是用到了什么高深莫测的技术,而只是一个思想意识层面的差异,而这些都很可能连带导致性能表现上的巨大差异. 所以有时候我们应该先 ...
- 漫谈C#编程语言在游戏领域的应用
0x00 前言 随着微软越来越开放,C#也变得越来越吸引人们的眼球.而在游戏行业中,C#也开始慢慢地获得了关注.这不, 网易绝代双娇手游团队已经全面使用.Net Core支持前后端统一C#开发,跨平台 ...
- 在centos7上安装ClamAV杀毒，并杀毒（centos随机英文10字母）成功
前言 上传文件的时候发现总是失败,查看top发现有个进程一直cpu占用80%以上,而且名称还是随机数.kill之后,一会儿又重新生成了.突然发现居然没有在服务端杀毒的经历.在此处补齐. 安装clama ...
- Kooboo CMS技术文档之四：Kooboo CMS的站点组成部分
Kooboo CMS本着功能独立分离的原则,将站点分为三部分组成:用户管理,站点管理和内容数据库管理.各个功能之间既可独立使用,也可以容易组成在一起形成一个完整的系统. 用户管理 管理整个系统内的用户 ...
- Express 教程 01 - 入门教程之经典的Hello World
目录: 前言 一.Express?纳尼?! 二.开始前的准备工作 三.测试安装之经典的Hello World 四.使用express(1)来生成一个应用程序 五.说明 前言: 本篇文章是建立在Node ...
- Linux学习笔记（一）：常用命令
经过统计Linux中能够识别的命令超过3000种,当然常用的命令就远远没有这么多了,按照我的习惯,我把已经学过的Linux常用命令做了以下几个方面的分割: 1.文件处理命令 2.文件搜索命令 3.帮助 ...
- POJ1149 PIGS [最大流 建图]
PIGS Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 20662 Accepted: 9435 Description ...
- opengl 笔记（1）
参考<opengl入门教程>.<OpenGL之坐标转换>.<OpenGL绘制管线操作细节>等资料. 复习下留个备忘:) /*- * Opengl Demo Test ...