HTML5进阶

内容：

1.geolocation元素

2.video元素和audio元素

3.localStorage

4.WebWorker

5.WebSQL、IndexedDB

6.文件操作、文件拖拽新概念

7.canvas元素和SVG/VML

1.geolocation元素

(1)原理

PC端：使用IP地址定位精度非常差
移动：使用GPS定位精度很高

(2)使用

  1 <!-- author: wyb -->
  2 <!DOCTYPE html>
  3 <html lang="en">
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7     <title>geolocation</title>
  8     <script>
  9         // geolocation对象的方法:
 10         // getCurrentPosition      获取位置(1次)
 11         // watchPosition           不断获取位置
 12         // clearWatch              关闭
 13         window.onload = function () {
 14             var oBtn = document.querySelector('#btn1')
 15             oBtn.onclick = function () {
 16                 // console.log(navigator.geolocation)
 17                 // navigator.geolocation.getCurrentPosition(成功, 失败, 参数)
 18                 navigator.geolocation.getCurrentPosition(function (res) {
 19                     alert("成功")
 20                     // coords -> 坐标
 21                     console.log(res.coords);
 22 
 23                     //创建和初始化地图函数：
 24                     function initMap() {
 25                         createMap();        // 创建地图
 26                         setMapEvent();      // 设置地图事件
 27                         addMapControl();    // 向地图添加控件
 28                         addMapOverlay();    // 向地图添加覆盖物
 29                     }
 30 
 31                     function createMap() {
 32                         map = new BMap.Map("bmap");
 33     　　　　　　　　　　　　// res.coords.longitude, res.coords.latitude -》 获取坐标中的经度和纬度
 34                         map.centerAndZoom(new BMap.Point(res.coords.longitude, res.coords.latitude), 15);
 35                     }
 36 
 37                     function setMapEvent() {
 38                         map.enableScrollWheelZoom();
 39                         map.enableKeyboard();
 40                         map.enableDragging();
 41                         map.enableDoubleClickZoom()
 42                     }
 43 
 44                     function addClickHandler(target, window) {
 45                         target.addEventListener("click", function () {
 46                             target.openInfoWindow(window);
 47                         });
 48                     }
 49 
 50                     function addMapOverlay() {
 51                         var markers = [
 52                             {
 53                                 content: "来找我啊",
 54                                 title: "我的位置",
 55                                 imageOffset: { 0, height: 3},
 56                                 position: {lat: res.coords.latitude, lng: res.coords.longitude}
 57                             }
 58                         ];
 59                         for (var index = 0; index < markers.length; index++) {
 60                             var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
 61                             var marker = new BMap.Marker(point, {
 62                                 icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
 63                                     imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
 64                                 })
 65                             });
 66                             var label = new BMap.Label(markers[index].title, {offset: new BMap.Size(25, 5)});
 67                             var opts = {
 68                                  200,
 69                                 title: markers[index].title,
 70                                 enableMessage: false
 71                             };
 72                             var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
 73                             marker.setLabel(label);
 74                             addClickHandler(marker, infoWindow);
 75                             map.addOverlay(marker);
 76                         }
 77                         ;
 78                     }
 79 
 80                     //向地图添加控件
 81                     function addMapControl() {
 82                         var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
 83                         scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
 84                         map.addControl(scaleControl);
 85                         var navControl = new BMap.NavigationControl({
 86                             anchor: BMAP_ANCHOR_TOP_LEFT,
 87                             type: BMAP_NAVIGATION_CONTROL_LARGE
 88                         });
 89                         map.addControl(navControl);
 90                         var overviewControl = new BMap.OverviewMapControl({
 91                             anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
 92                             isOpen: true
 93                         });
 94                         map.addControl(overviewControl);
 95                     }
 96 
 97                     var map;
 98                     initMap();
 99 
100                 }, function (err) {
101                     alert("失败")
102                     alert(err)
103                 })
104             }
105         }
106     </script>
107     <!--引用百度地图API-->
108     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
109     <style>
110         .container{
111             width: 80%;
112             margin: 0 auto;
113         }
114         .bmap {
115             width: 100%;
116             height: 666px;
117             margin: 0 auto;
118             border: 1px solid black;
119             text-align: center;
120         }
121     </style>
122 </head>
123 <body>
124 
125 <div class="container">
126     <div class="bmap" id="bmap">
127         <input type="button" value="定位" id="btn1">
128     </div>
129 </div>
130 
131 </body>
132 </html>

最后效果如下：

注意：不能使用谷歌浏览器(请求的IP库是国外的，没翻墙的话查不到IP对应的地址!)，使用微软的IE or Edge浏览器均可实现，另外要允许使用定位

2.video元素和audio元素

关于video元素和audio元素：https://www.cnblogs.com/wyb666/p/9751083.html

3.localStorage

(1)什么是localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同

(2)优点与缺点

localStorage的优势：

localStorage拓展了cookie的4K限制
localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限：

浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
localStorage在浏览器的隐私模式下面是不可读取的
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
localStorage不能被爬虫抓取到

(3)与其他存储方法的区别

localStorage 永久存储(本地存储)、大(5M)、浏览器独享
sessionStorage 会话期间存储(浏览器一关就没)、大(5M)
cookie：小(4K)、浏览器和服务器共享

(4)localStorage使用

 1 <!-- author: wyb -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>localStorage</title>
 8     <script>
 9 　　　　　// 存取元素
10         // localStorage.a=12;      
11         // alert(localStorage.a);   
12         // console.log(localStorage);
13         // localStorage.b=5;
14 
15         //遍历 -> 遍历所有元素 -> 属性和方法
16         // for(let name in localStorage){
17         //   alert(`${name}: ${localStorage[name]}`);
18         // }
19 
20         // 遍历 -> 只遍历属性值
21         for(let i=0;i<localStorage.length;i++){
22             let key=localStorage.key(i);
23 
24             alert(`${key}: ${localStorage[key]}`);
25         }
26 
27         // 删除
28         delete localStorage.a
29     </script>
30 </head>
31 <body>
32 </body>
33 </html>

简单应用-保存草稿：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>localStorage应用-存草稿</title>
 6     <script>
 7         window.onload=function (){
 8             let oTxt=document.getElementById('txt1');
 9             let oBtn=document.getElementById('btn1');
10 
11             oTxt.value=localStorage.tmp_txt||'';
12 
13             oTxt.oninput = function (){
14                 localStorage.tmp_txt=oTxt.value;
15             };
16 
17             oBtn.onclick = function (){
18                 alert('发送完成');
19                 oTxt.value = ''
20                 delete localStorage.tmp_txt;
21             };
22         };
23     </script>
24 </head>
25 <body>
26 
27     <textarea rows="28" cols="80" id="txt1"></textarea>
28     <input type="button" name="" value="发送" id="btn1">
29 
30 </body>
31 </html>

4.WebWorker

web多进程，几乎没怎么用

在前端中的进程：

主进程——UI进程
子进程——工作进程

WebWorker：

不能控制UI的东西；可以进行数据交互
子进程不能再创建子进程
跨域

关于多进程——能更充分发挥计算机资源（内存×、IO×、网络×、CPU√）
基本在web中没用，因为web中不太占用CPU，主要消耗是在内存及IO及网络带宽上

webworker实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>webworker</title>
 6     <script>
 7         // 这是主进程
 8         let oW=new Worker('1.js');
 9 
10         oW.onmessage = function (ev) {
11             alert(ev.data)
12         }
13 
14         oW.postMessage({n1: 2, n2: 3})
15     </script>
16 </head>
17 <body></body>
18 </html>

1 // 这是子进程
2 this.onmessage = function (ev) {
3     let {n1, n2} = ev.data;
4     let result = n1 + n2;
5     this.postMessage(result);
6 };

5.WebSQL、IndexedDB

因为有安全隐患，被W3C删掉了，现在我们无需关心

6.文件操作、文件拖拽新概念

详情见：

https://www.cnblogs.com/wyb666/p/9735022.html

https://www.cnblogs.com/wyb666/p/9740731.html

7.canvas元素和SVG/VML

(1)三者区别

canvas 位图——放大失真 HTML5标准
SVG 矢量图——无限缩放不是HTML5的东西，是一个独立标准
VML 矢量图 IE的矢量图

(2)canvas具体使用

路径操作：相当于选区——没有效果，还需后续操作
闭合：一定要用closePath
边线：stroke()
填充：fill()
线宽：lineWidth
线色：strokeStyle
填充颜色：fillStyle

实例：

 1 <!-- author: wyb -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>canvas画图</title>
 8     <script>
 9         window.onload = function () {
10             let oC = document.querySelector('#c1');
11 
12             // 图形上下文——接口：所有绘图方法、属性
13             let gd = oC.getContext('2d');
14 
15             // 路径操作——类似PS的选区 -> 选取区域:
16             // 起点
17             gd.moveTo(470, 81);
18             gd.lineTo(778, 236);
19             gd.lineTo(532, 411);
20             gd.lineTo(312, 259);
21 
22             // gd.lineTo(470, 81);
23             gd.closePath();             // 也可以直接使用系统提供的闭合函数来闭合(建议用这个)
24 
25             // 选取了之后要做事:
26             gd.lineWidth=20;            // 设置线的宽度
27             gd.strokeStyle='red';       // 设置线的颜色
28             gd.stroke();                // 边线
29             // gd.fill();               // 填充
30         }
31     </script>
32     <style>
33         body {
34             background: black;
35             text-align: center;
36         }
37 
38         #c1 {
39             background: #fff;
40         }
41     </style>
42 </head>
43 <body>
44 <canvas id="c1" width="800" height="600"></canvas>
45 </body>
46 </html>

效果如下：