HTML5知识点总结（二）——地理定位、存储、Canvas

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)的用法与平移相同。点击此处 查看更多用法。