1、获取地理定位（不推荐）window.navigator.geolocation.getCurrentPosition(function(position){console.log(position)},function(msg){console.log(msg)//获取失败返回相应信息})如果成功，则获取当前地理位置的经纬度。position.coords.latitude//经度position.coords.longitude//纬度注意：如果浏览器提示“获取您的位置”，请点击允许；如果仍然报错“Networklocationproviderat'https://www.googleapis.com/':Noresponsereceived.”，请科学上网。2.存储随着互联网的飞速发展，基于网络的应用越来越普遍，也越来越复杂。为了满足各种需求，大量的数据往往存储在本地。传统上，我们使用document.cookie来存储，但由于其存储大小只有4K左右，而且解析相当复杂，给开发带来了很多不便。HTML5规范提出了一种解决方案，使用sessionStorage和localStorage来存储数据。HTML5存储的特点：1.设置和读取方式2.容量更大3.可以存储字符串1.除非手动删除，否则永久有效2.可以被多个窗口共享3.容量约为20M//Setsession:属性名,valuewindow.sessionStorage.setItem("姓名","张三");//获取会话的值window.sessionStorage.getItem("name");//deletesessionwindow.sessionStorage.removeItem("name");//clearsessionwindow.sessionStorage.clear();//setlocalStorage:属性名，值window.localStorage.setItem("name","张三");//获取本地存储的值window.localStorage.getItem("name");//删除localStoragewindow.localStorage.removeItem("name");//清除localStoragewindow.localStorage.clear();3.Canvaspublicpart//获取画布元素varc=docuemnt.querySelector('#canvas');//获取绘图对象varctx=c.getContext('2d')/*开始绘制步骤*//*结束绘制步骤*///drawctx.stroke();画线//起始位置（横纵坐标）ctx.moveTo(100,100);//结束位置ctx.lineTo(300,100);//设置线条颜色ctx.strokeStyle="red";//设置线的宽度ctx.lineWidth=10如果重复以上步骤再画一条线，两次绘制会出现重复绘制情况：解决方法一：只调用一次stroke()绘制方法解决方法二：使用beginPath()画完后重置路径倒角样式画线交界样式：ctx.lineJion='round';//圆角|斜角平角|尖角（默认）闭合路径ctx.moveTo(100,100);ctx.lineTo(100,300);ctx.lineTo(400,300);//ctx.lineTo(100,100);ctx.closePath();//闭合路径，绘制最后一步时使用渐变线性渐变；//创建渐变方案：起点坐标，终点坐标varlgd=ctx.createLinearGradient(100,100,500,100);//添加渐变色：position(0-1),颜色lgd.addColorStop(0,"红色");lgd.addColorStop(0.5,"blue");lgd.addColorStop(1,"green");//给strokeStylex.strokeStyle=lgdctx.moveTo(100,100);ctx.lineTo(500,100);ctx.lineWidth=20;RadialGradient//创建渐变方案:起点中心坐标，起点Radius，终点中心坐标，终点半径varrgd=ctx.createRadialGradient(200,150,50,200,150,100)//添加渐变色rgd.addColorStop(0,"red");rgd.addColorStop(1,"green");//添加渐变fillStylectx.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();点此查看效果Dashedlinectx.moveTo(100,50);ctx.lineTo(400,50);//Dashedline:参数为数组：线的长度，空白ctx.setLineDash([20,20]);ctx.stroke();动态矩形varx=0;可变步骤=5；变种我=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}elseif(x<=0){i=1;}},21)点击查看效果drawtext//drawtext:pixelsandfontctx.font="50pxnewhard-tippedrunningscript";ctx.textAlign="center";ctx.textBaseline="meddle";//设置阴影颜色ctx.shadowColor="red";//设置阴影偏置shiftctx.shadowOffsetX(5);ctx.shadowOffsetY(5);//阴影模糊ctx.shadowBlur(5);//参数一：文字参数二：横坐标参数三：纵坐标ctx.stockeText("最帅的在全网",300,200);//填充文本ctx.fileText("全网最帅",300,200);绘制图片varimg=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）的用法和Panning一样，更多用法点击这里。
