1、获取地理定位(不推荐)
window.navigator.geolocation.getCurrentPosition(function(position){
console.log(position)
},function(msg){
console.log(msg) //获取失败返回相应信息
})如果成功，则获取当前地理位置的经纬度。
position.coords.latitude // 经度
position.coords.longitude // 纬度注：若浏览器提示“获取您的位置”，请点击允许；
如果仍然报错”Network location provider at ‘
https://www.googleapis.com/‘ : No response received.”，请
科学上网。
2、存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，回经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储，但是由于其存储大小只有4K左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案，使用sessionStorage和localStorage存储数据。
HTML5存储的特性：
1、设置，读取方法
2、容量较大
3、能存储字符串
sessionStorage:
1、关闭浏览器窗口生命周期结束
2、在同一个窗口下数据可以共享
3、容量约5M
localStorage:
1、永久有效，除非手动删除
2、可以多窗口共享
3、容量约20M
// 设置session：属性名字，值
window.sessionStorage.setItem("name", "张三");
// 获取session的值
window.sessionStorage.getItem("name");
// 删除session
window.sessionStorage.removeItem("name");
// 清空session
window.sessionStorage.clear();
// 设置localStorage：属性名字，值
window.localStorage.setItem("name", "张三");
// 获取localStorage的值
window.localStorage.getItem("name");
// 删除localStorage
window.localStorage.removeItem("name");
// 清空localStorage
window.localStorage.clear();3、Canvas
公共部分
<canvas id="canvas"></canvas>// 获取canvas 元素
var c = docuemnt.querySelector('#canvas');
// 获取绘制对象
var ctx = c.getContext('2d')
/* 开始绘画步骤*/
/* 结束绘画步骤*/
// 绘制
ctx.stroke();画线
// 开始的位置（横纵坐标）
ctx.moveTo(100,100);
// 结束的位置
ctx.lineTo(300,100);
// 设置线的颜色
ctx.strokeStyle = "red";
// 设置线的宽度
ctx.lineWidth = 10若重复上面步骤再画一条线，两次绘制会存在重复绘制的情况：
- 解决方式1：只调用一次
stroke()绘制方法 - 解决方式2：绘制后使用
beginPath()重置路径
折角样式
画线连接处样式：
ctx.lineJion = 'round'; // round圆角| bevel平角 | biter尖角（默认）闭合路径
ctx.moveTo(100,100);
ctx.lineTo(100,300);
ctx.lineTo(400,300);
// ctx.lineTo(100,100);
ctx.closePath(); //闭合路径，画图差最后一步时使用渐变
线性渐变
//创建渐变方案：起点坐标，终点坐标
var lgd = ctx.createLinearGradient(100,100,500,100);
//添加渐变的颜色：位置（0-1），颜色
lgd.addColorStop(0, "red");
lgd.addColorStop(0.5, "blue");
lgd.addColorStop(1, "green");
// 把渐变的方案给strokeStyle
stx.strokeStyle = lgd
ctx.moveTo(100,100);
ctx.lineTo(500,100);
ctx.lineWidth = 20;径向渐变
// 创建渐变方案:起点圆心坐标，起点半径，终点圆心坐标，终点半径
var rgd = ctx.createRadialGradient(200,150,50,200,150,100)
// 添加渐变颜色
rgd.addColorStop(0, "red");
rgd.addColorStop(1, "green");
// 把渐变的方案给fillStyle
ctx.fillStyle = rgd;
// 添加方形边框
ctx.moveTo(100,50);
ctx.lineTo(300,50);
ctx.lineTo(300,300);
ctx.lineTo(100,300);
ctx.closePath();
ctx.fill();非零环绕
原理：假设以最内侧图形内部某一点为起点，向外画一条射线，射线以起点为轴，顺时针扫描图形。绘制图形过程中，与射线移动方向相同的框线赋值为1，方向相反的框线赋值为 -1，从射线起点到终点做加法运算，和不为0的范围则填充颜色。此为非零环绕。
// 外层顺时针
ctx.moveTo(50,50);
ctx.lineTo(350,50);
ctx.lineTo(350,350);
ctx.lineTo(50,350);
ctx.closePath();
// 中层逆时针
ctx.moveTo(100,100);
ctx.lineTo(100,300);
ctx.lineTo(300,300);
ctx.lineTo(300,100);
ctx.closePath();
// 内层顺时针
ctx.moveTo(150,150);
ctx.lineTo(250,150);
ctx.lineTo(250,250);
ctx.lineTo(150,250);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.fillStyle = "green";
ctx.fill();
ctx.stroke();点击此处 查看效果
虚线
ctx.moveTo(100,50);
ctx.lineTo(400,50);
// 虚线： 参数是一个数组：线的长度，空白长度
ctx.setLineDash([20,20]);
ctx.stroke();动态的矩形
var x = 0;
var step = 5;
var i = 1;
setInterval(function(){
// 清理画布
ctx.clearRect(0,0,c.width,c.height);
ctx.fillStyle = 'green';
ctx.fillRect(x,100,100,200); // 横纵坐标，宽高
ctx.stroke();
x += step*i;
if (x > c.width - 100) {
i = -1
} else if(x<=0) {
i = 1;
}
},21)
点击此处 查看效果
绘制文本
// 绘制文本：像素 和 字体
ctx.font="50px 全新硬笔行书简";
ctx.textAlign = "center";
ctx.textBaseline = "meddle";
//设置阴影颜色
ctx.shadowColor="red";
//设置阴影偏移量
ctx.shadowOffsetX(5);
ctx.shadowOffsetY(5);
//阴影的模糊度
ctx.shadowBlur(5);
// 参数1：文本 参数2：横坐标 参数3：纵坐标
ctx.stockeText("全网最帅", 300, 200);
// 填充文本
ctx.fileText("全网最帅"， 300， 200);绘制图片
var img = document.createElement("img");
img.src = "image/1.jpg";
// 图片和画布发生关联
img.onload = function(){
// 参数： 图片对象，画布横坐标，画布纵坐标，图片宽，图片高
ctx.drawImage(img, 100, 100, 200, 100)
//
ctx.drawImage(img, 180, 50, 350, 170, 200, 100)
}绘制弧度
ctx.arc(200,150,Math.PI/2, 2*Math.PI, true)
// true 表示顺时针，false 表示逆时针平移
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.translate(0, 100);旋转（rotate）和缩放(scale)的用法与平移相同。
点击此处 查看更多用法。
