详解HTML5中的SVG,地理定位与web存储

无内鬼,继续搞点HTML5。

H5 SVG

什么是SVG?它指可伸缩矢量图形(Scalable Vector Graphics),用于定义在网络上使用的矢量图形,它使用XML格式定义图形,在放大或者改变尺寸的情况下图形质量不会受到损失,SVG是万维网联盟的标准。

与其他图像格式相比,SVG的优势在于:

  • 它可以被文本编辑器创建和修改
  • 可被搜索,索引,脚本化或压缩
  • SVG可伸缩
  • 可在任何分辨率下高质量打印
  • 可在图像质量不下降的情况下被放大

IE9以上,火狐,Opera,Chrome以及Safari都支持内联SVG。

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element 上可以找到大量SVG图形的API,还可以看到各个浏览器的兼容性信息。

使用.svg后缀的文件为矢量图形文件,内部代码即是SVG代码,方便图形重用。

使用<iframe src="svg.svg" width="150px" height="150px" frameborder="no"></iframe>就可以显示一个svg文件的图形。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG</title>
</head>
<body>
<svg viewbox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="50"></circle>
</svg>
<svg viewbox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>
</svg>
</body>
</html>

H5 地理定位

在用户允许的情况下,使用H5的Geolocation API获取用户的地理位置。IE9以上,火狐,Chrome,Safari以及Opera支持地理定位,如果设备支持GPS,则地理定位会更加精确,所以它对手机的支持相对好一些。

这个示例代码使用的是谷歌地图,由于某些原因测试不出来。国内的地图倒是有提供的api,做的挺完善,如果有需求可以去调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地理定位</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 获取当前地理位置
function init() {
navigator.geolocation.getCurrentPosition(function(position) {
// 设定地图参数,将用户当前的地理经纬度设置为地图中心点
var coords = position.coords;
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom : 14,
center : latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// 创建地图并在div中显示
var map1;
map1 = new google.maps.Map(document.getElementById("map"),myOptions);
// 地图上创建标记
var marker = new google.maps.InfoWindow({
content : "当前位置"
})
infowindow.open(map1, marker);
})

}
</script>
</head>
<body>
<div id="map" style="width: 2000px; height: 1000px;"></div>
</body>
</html>

H5 Web存储

HTML5提供了两种在客户端存储数据的新方法:localStorage是没有时间限制的数据存储,一年以后数据仍可使用。sessionStorage是针对一个session的数据存储。之前数据存储是由cookie来完成的,但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率也不高。

使用localStorage对数据进行存储是可以保存很长时间的,当浏览器关闭或刷新页面时输入的数据不会消失,而是会保存在localStorage里面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web存储</title>
<script type="text/javascript">
var ta;
var btn;
window.onload = function() {
ta = document.getElementById("ta");
if (localStorage.text) {
ta.value = localStorage.text;
}
btn = document.getElementById("btn");
btn.onclick = function() {
localStorage.text = ta.value;
}
}
</script>
</head>
<body>
<textarea rows="10" cols="20" id="ta"></textarea><br>
<button type="button" id="btn">save</button>
</body>
</html>

sessionStorage方法针对一个会话进行数据存储,当用户关闭当前浏览器窗口,数据就会被删除。以下代码展示了一个简单的累加器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web存储</title>
<script type="text/javascript">
var num = 0;
var txt;
var btn;
window.onload = function() {
txt = document.getElementById("txt");
btn = document.getElementById("addbtn");
if (sessionStorage.num) {
num = sessionStorage.num;
showNum();
}
else {
num = 0;
}

btn.onclick = function() {
num++;
sessionStorage.num = num;
showNum();
}
}
function showNum() {
txt.innerHTML = num;
}
</script>
</head>
<body>
<span id="txt">0</span>
<button type="button" id="addbtn">+1</button>
</body>
</html>
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信