geolocation/video、audio/localSto

HTML5

    1. geolocation 定位
        原理
            PC端：通过IP地址定位(精度差),需使用IP库(百度下载);
                 Chrome 通过google定位IP,所以不翻墙就无法完成定位;
                 IE 通过微软(microsoft)定位,测试通常使用IE;
                 定位以域名为单位,只要允许\拒绝一次,该域名下所有网址全部被允许\拒绝;
                 测试时不能使用文件域;
            //核心代码
            //geolocation存在于navigator中,而不是window,
            //geolocation中getCurrentPosition方法只获取一次位置 适用于定位,
            //watchPositionf方法会一直获取位置 适用于导航,
            //clearWatch方法取消位置监视
            navigator.geolocation.getCurrentPosition(res=>{
                //用户同意即为成功;
                //res中有coords中有经纬度,用来定位;
                //使用百度开放地图中获取的代码;
                //页面中引入1.2版本的API
                //获取的代码中生成百度地图的JS代码放在此处;
                alert('成功')
            },err=>{
                alert('失败')
            });
            移动端: 通过GPS定位(精度高);
    2. video、audio 音频
    3. localStorage 类似cookie的存储
        cookie: 存储比较小(4k),数据浏览器跟服务器共享;
        localStorage: 存储比较大(5M,以域为单位储存),数据浏览器独享,没有过期时间;
        (-)sessionStorage: 仅在会话期间存储数据,浏览器一旦被关闭就没了(通常不用);
        //核心代码
        localStorage.a=12;//把a存到localStorage;
        var a = localStorage.a;//得到存储的a;
        delete localStorage.a;//删除存储的a;
        //遍历
        for(let i=0;i<localStorage.length;i++){
            let key = localStorage.key(i);//此处需要使用key函数获得存储的所有key,localStorage自身函数不会被遍历;
            alert(`${key}:${localStorage[key]}`);
        }
        //localStorage常用用途:保存草稿
        //监听文本域的oninput事件,将文本域的内容存到localStorage中;
        //下次在进入该页面时将localStorage中的内容放到文本域中;
        //用户发送后,清空存储的localStorage;
    4. (-)WebWorker 在Web端实现多进程工作模式
        //核心代码
        //html script代码
        let oW = new Worker('1.js');//指定接收数据的JS,每个worker对应一个独立的JS文件
        .postMessage(12);//发送了数据12,多个数据可使用JSON发送
        oW.onmessage = function (ev){
            alert(ev.data);//接收1.js发送回来的数据
        }
        //1.js代码
        this.onmessage = function (ev){
            alert(ev.data);
            this.postMessage(ev.data+3);//向HTML发送数据15
        }
    5. (-)WebSQL,IndexedDB 前端数据库,安全性很差,已经被W3C删除了;
    6. FileReader 文件拖拽,文件操作(参考2-8);
    7. canvas 位图(失真) H5标准,常用于图表、游戏、处理图像(添加滤镜等操作)
       //核心代码
        //canvas标签,宽高必须写在行内
        <canvas id = 'c1' width='800' height='800'></canvas>;
        //js代码
        window.onload = function (){
            //获取页面上的canvas标签
            let oC = document.getElementById('c1');
            //获取图形上下文接口:包含所需属性、函数
            let gd = oC.getContext('2d'); 
            //路径操作 选中一个范围
            gd.moveTo(470,81);//起点
            gd.lineTo(778,236);//连接
            gd.lineTo(532,411);//连接
            gd.lineTo(312,259);//连接
            gd.closePath();//系统自动闭合,无需手动处理闭合路径,或者使用gd.lineTo(470,81);//手动闭合路径;
            gd.beginPath();//清除之前开启的路径,防止两次路径重复渲染
            
            gd.react();//画矩形
            gd.arc();//画圆,参数为：圆心,半径,弧度开始,弧度结束,逆时针

            gd.stroke();//对选取进行描边
            gd.fill();//对选取进行填充
            gd.lineWidth=10;//设置边线宽度为10
            gd.strokeStyle='red';//设置边线的颜色;
            gd.fillStyle='red';//设置填充的颜色;

            gd.strokeRect();//直接画一个矩形线框
            gd.fillRect();//直接填充一个矩形线框
            gd.clearRect();//清除一个矩形线框
        }
       SVG 矢量图(不失真) 独立标准
       VML 矢量图(不失真) IE的矢量图解决方案
    8. manifest文件  在前端控制缓存
    9. CSS3

扩展

百度开放平台
    http://lbsyun.baidu.com/
    开发文档=>地图生成器=>自行调整=>获取代码;
    获取的代码中引入的百度地图api2.0版本需要使用密匙;
    修改版本改为1.2即可;1.2版本是免费开放;
    修改代码中的坐标为res.coords.;
    修改new BMap.Map("omap")omap改成自己容器DIV的ID;