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扩展、地理定位、拖放
时间: 2024-10-22 15:51:57
HTML5_05之SVG扩展、地理定位、拖放的相关文章
HTML5——拖放 地理定位 视频 音频 新的input类型
拖放 ————> 设置元素为可拖放 拖动什么 放到何处 进行放置 实例[来回拖放] 地理定位 使用地理定位 处理错误和拒绝 在地图中显示结果 基于脚本的交互式地图 给定位置的信息 用户移动时更新位置 HTML插件 可用于播放音频和视频(以及其他) 辅助程序是使用 <object> 标签来加载的. 允许用户来控制部分或全部播放设置 <object> <embed> 视频 <video width="320" height="2
HTML5--关于Geolocalition(地理定位)
* Geolocation(地理定位) * 基本内容 * 地理定位 - 地球的经度和纬度的相交点 * 实现地理定位的方式 * GPS - 美国的,依靠卫星定位 * 北斗定位 - 纯国产,惯性定位技术和卫星定位 * 基站定位 - 移动运营商创建基站(提供信号源) * 基于互联网 - IP地址(PC端和移动端) * 目前很多浏览器都具有定位功能 * HTML5中地理定位 * 地理定位功能并不是属于HTML5专有内容 * HTML5的地理定位技术,由Google公司提供的 * Google Map产品
【温故而知新-Javascript】使用地理定位
地理定位(Geolocation)API让我们可以获取用户当前地理位置的信息(或者至少是正在运行浏览器的系统的位置).它不是HTML5规范的一部分,但经常被归组到与HTML5相关的新功能中. 1. 使用地理定位 我们通过全局属性 navigator.geolocation 访问地理定位功能,它会返回一个 Geolocation对象. 获取当前位置 顾名思义,getCurrentPosition方法能获得当前的位置,不过位置信息不是由函数自身返回的.我们需要提供一个成功的回调函数,它会在位置信息可
联合使用 HTML 5、地理定位 API 和 Web 服务来创建移动混搭程序
查找并跟踪位置坐标以用在各种 Web 服务中 在这个由五个部分所组成的系列的第一部分中,您将接触到移动 Web 应用程序中最流行的新技术:地理定位.高端智能手机都内置 GPS,现在您将了解 Web 服务如何使用它.在本文中,您将学到如何使用各种地理定位标准,以及如何使用流行的 Web 服务来创建有趣的移动混搭程序. 关于本系列? HTML 5 是一项让人振奋的技术,这有着充分的理由.这将会是一次技术突破,因为它可以将桌面应用程序功能带入浏览器中.除了传统浏览器外,对于移动浏览器,其潜力甚至更大.
[Javascript]JS新API标准-地理定位(navigator.geolocation)
在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation的三个方法: 1. getCurrentPosition() 2. watchPosition() 3. clearWatch() getCurrentPosition() 使用方法:navigator.geolocation.getCurrentPosition(successCallback,
HTML5地理定位,百度地图API,知识点熟悉
判断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位 if (navigator.geolocation) { alert('支持地理定位'); } else { alert('不支持地理定位'); } 获取自己位置经纬度 <script> var x=document.getElementById("wrap"); function getLocation () { if (navigator.geolocation) { navigator
HTML5 — 地理定位
Geolocation:地理定位,获取当前浏览器所在的地理坐标信息(包括经度.纬度.海拔高度.移动速度),实现LBS应用(Location Based Service)——基于定位的服务,如订 餐.面对面XX.导航.消息推送等.官网:http://lbsyun.baidu.com/ 技术上如何获取浏览器所在的地理坐标: (1)手机浏览器: 可以通过自带的GPS芯片与卫星定位通信——精确在m级: 还可以通过手机通信基站来定位——精度在km级 (2)PC浏览器: 通过IP地址反向推导出浏览器定位
HTML5 调用百度地图API地理定位
<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="ht
【HTML5】地理定位
<!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> <button onclick="getLocation()">试一下</button> <script> var x=document.getElementById("demo"); function getLocation()