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 {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: {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 = {
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);
};