HTML5: 1.geolocation——定位 2.video、audio 3.localStorage cookie: 小(4K)、浏览器和服务器共享 localStorage: 大(5M)、浏览器独享 4.*WebWorker 多进程 5.WebSQL、IndexedDB——安全隐患 *W3C删掉了 6.文件操作、文件拖拽 √ 7.canvas——画图 SVG/VML 8.manifest文件 前台控制缓存 *本地应用 9. CSS3: -------------------------------------------------------------------------------- geolocation——定位 1.原理 PC端:IP地址 精度非常差 移动:GPS 精度很高 2.PC端 IP库 Chrome -> google.com -> ? IE -> microsoft.com -------------------------------------------------------------------------------- getCurrentPosition 获取位置(1次) watchPosition 不断获取位置 clearWatch -------------------------------------------------------------------------------- localStorage:5M/域名 1.域名、跨域 2.极其方便 3.用途: 记录用户名 保存草稿 localStorage 永久存储 sessionStorage 会话期间存储——浏览器一关就没 -------------------------------------------------------------------------------- WebWorker——Web多进程(没用过) 主进程——UI进程 子进程——工作进程 WebWorker: 1.不能控制UI的东西;数据交互OK 2.子进程不能再创建子进程 3.跨域 多进程——更充分发挥计算机资源(内存×、IO×、网络×、CPU√) 基本没用 -------------------------------------------------------------------------------- WebSQL × IndexedDB × -------------------------------------------------------------------------------- 画图: canvas 位图——放大失真 HTML5标准 SVG 矢量图——无限缩放 不是HTML5的东西,是一个独立标准 VML 矢量图 IE的矢量图 -------------------------------------------------------------------------------- canvas 1.路径操作: 相当于选区——没有效果,还需后续操作 闭合——一定要用closePath 2.边线:stroke() 3.填充:fill() 线宽:lineWidth 线色:strokeStyle 填充颜色:fillStyle -------------------------------------------------------------------------------- Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': HTMLDocument object could not be cloned. 多线程:共享存储空间——多个进程之间传引用 多进程:各自独享存储空间——复制一份给子线程 -------------------------------------------------------------------------------- canvas 1.图表——echarts.js 2.游戏 3.滤镜 -------------------------------------------------------------------------------- 1.CSS3新样式——动画、3D、transform 2.canvas路径问题、像素操作、SVG、VML、图表库、d3 3.移动端布局、移动端touch 4.相关库——iscroll、hammer 5.canvas高级应用 游戏 WebGL --------------------------------------------------------------------------------
定位
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> .bmap {width:600px; height:400px; border:1px solid black} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> <script> window.onload=function (){ var oBtn=document.getElementById('btn1'); oBtn.onclick=function (){ //getCurrentPosition(成功, 失败, 参数) navigator.geolocation.getCurrentPosition(function (res){ console.log(res.coords); alert('成功'); //创建和初始化地图函数: function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMapOverlay();//向地图添加覆盖物 } function createMap(){ map = new BMap.Map("bmap"); map.centerAndZoom(new BMap.Point(res.coords.longitude,res.coords.latitude),15); } function setMapEvent(){ map.enableScrollWheelZoom(); map.enableKeyboard(); map.enableDragging(); map.enableDoubleClickZoom() } function addClickHandler(target,window){ target.addEventListener("click",function(){ target.openInfoWindow(window); }); } function addMapOverlay(){ var markers = [ {content:"来找我啊",title:"我的位置",imageOffset: {width:0,height:3},position:{lat:res.coords.latitude,lng:res.coords.longitude}} ]; for(var index = 0; index < markers.length; index++ ){ var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat); var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{ imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height) })}); var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)}); var opts = { width: 200, title: markers[index].title, enableMessage: false }; var infoWindow = new BMap.InfoWindow(markers[index].content,opts); marker.setLabel(label); addClickHandler(marker,infoWindow); map.addOverlay(marker); }; } //向地图添加控件 function addMapControl(){ var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); scaleControl.setUnit(BMAP_UNIT_IMPERIAL); map.addControl(scaleControl); var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(navControl); var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true}); map.addControl(overviewControl); } var map; initMap(); }, function (err){ alert('失败'); }); }; }; </script> </head> <body> <input type="button" value="定位" id="btn1"> <div class="bmap" id="bmap"> </div> </body> </html>
多进程 webworker
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> let oW=new Worker('1.js'); oW.onmessage=function (ev){ alert(ev.data); }; oW.postMessage({n1: 25, n2: 99}); </script> </head> <body> </body> </html>
1.js
this.onmessage=function (ev){
let {n1, n2}=ev.data;
let result=n1+n2;
this.postMessage(result);
};