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. 使 ...
随机推荐
- [Java 缓存] Java Cache之 DCache的简单应用.
前言 上次总结了下本地缓存Guava Cache的简单应用, 这次来继续说下项目中使用的DCache的简单使用. 这里分为几部分进行总结, 1)DCache介绍; 2)DCache配置及使用; 3)使 ...
- 验证管理员权限（C#）
参考页面: http://www.yuanjiaocheng.net/webapi/test-webapi.html http://www.yuanjiaocheng.net/webapi/web-a ...
- Entity Framework 教程——DBContext
DBContext: 在之前的章节<创建实体数据模型>中,EDM为我们创建了SchoolDBEntities 类,它派生子System.Data.Entity.DbContext这个类,这 ...
- StatePattern(状态模式)
/** * 状态模式 * @author TMAC-J * 状态模式和策略模式很像,其实仔细研究发现完全不一样 * 策略模式各策略之间没有任何关系,独立的 * 状态模式各状态之间接口方法都是一样的 * ...
- PHP static静态属性和静态方法
这里分析了php面向对象中static静态属性和静态方法的调用.关于它们的调用(能不能调用,怎么样调用),需要弄明白了他们在内存中存放位置,这样就非常容易理解了.静态属性.方法(包括静态与非静态)在内 ...
- ActionContext.getContext().getSession()
ActionContext.getContext().getSession() 获取的是session,然后用put存入相应的值,只要在session有效状态下,这个值一直可用 ActionConte ...
- Javascript学习笔记
Javascript 2016年12月19日整理 JS基础 Chapter1 JS是一门运行在浏览器客户端的脚本编程语言,前台语言 组成部分 1. ECMAscript JS标准 2. DOM 通过J ...
- H3 BPM初次安装常见错误详解1-4
错误1: 首次安装完成无法访问,效果如下. 错误原因:没有配置IIS. 解决方法: 控制面板-程序-打开或关闭Windows功能,选择internet信息服务. 因为安装的时候没有没有iis,所以程序 ...
- atitit.attilax的软件 架构 理念.docx
atitit.attilax的软件 架构 理念.docx 1. 预先规划.1 2. 全体系化1 3. 跨平台2 4. 跨语言2 5. Dsl化2 5.1. 界面ui h5化2 6. 跨架构化2 7. ...
- Linux网络属性配置
目录 IP地址分类 如何将Linux主机接入到网络中 网络接口的命名方式 ifcfg系列命令 如何配置主机名 如何配置DNS服务器指向 iproute2系列命令 Linux管理网络服务 永久生效配置路 ...