Web存储与Canvas绘画 --- 19/03/01

什么是Web存储？

将用户的浏览数据存储在本地资源上。

早期存储与Web存储

早期存储： cookies（资源保留在服务器，容量上限为4096kb，一般只保存20个cookies，消耗带宽）；
Web存储：更加安全快速，可以大量存储数据且不影响性能；
localStorage（数据存储永不过期，除非手动删除）；
sessionStorage（用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据）。

存储形式： Key --> Value（键值对） {name:username} --> Json

常用方法

localStorage.setItem(key,value);	//保存数据
localStorage.getItem(key);			//读取数据
localStorage.removeItem(key);		//删除单个数据
localStorage.clear();				//删除所有数据
localStorage.key(index);			//得到某个索引的key（从0开始）

使用前应先判断浏览器是否支持localStorage和sessionStorage

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

什么是Canvas？

Canvas只是图形容器，本身没有绘图能力，需要通过脚本（通常是JavaScript）来完成。

先设置好状态再进行绘制

var c = document.getElementById('myCanvas'); 	//1.获取canvas元素
var ctx = c.getContext("2d");					//2.创建context对象
ctx.fillRect(0,0,150,75);						//3.开始绘制

常用方法与属性

canvas的左上角坐标为（0,0）；
上面的fillRect()方法意思为：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

moveTo(x,y); 			//定义开始坐标
lineTo(x,y);			//定义新的坐标
beginPath(); 			//开始绘制路径
closePath();			//结束绘制路径

stroke();				//绘制线条函数
fill();					//填充式绘画

.width					//设置画布宽（画布宽高 使用canvas元素打'.'设置）
.height					//设置画布高
.lineWidth 				//设置线条粗细
.strokeStyle			//设置线条颜色
.fillStyle				//填充颜色

rect(x,y,w,h);			//矩形状态
fillRect(l,t,w,h); 		//实心矩形
strokeRect(l,t,w,h);	//带框矩形
clearRect(l,t,w,h);		//在矩形内清除一个矩形

lineJoin:milter
还没写完。。。