canvas绘制文本，清除绘制的元素，绘制图片，绘制图片的动画效果，前端的缓存技术，localStorage、sessionStorage、cookie三者的区别

canvas绘制文本

填充文本，第一个参数是填写的字符串就是要绘制的文字，第二三个参数是字符串在画布上的坐标，第四个参数是允许字符串的最大长度

fillText("字符串",x,y,maxWidth);

绘制文本，参数和上面的是一样的

strokeText("字符串",x,y,maxWidth);

这两者都可以绘制文字，区别不大，只是前者绘制出来就想网页中的文字一样，后者绘制出来有加黑的效果，文字放大也会有镂空效果

实例

<style type="text/css">
	#box {
		border: 1px black solid;
	}
</style>
<canvas id="box" width="1200px" height="600px">
	如果不认识我，就直接显示文字，认识就解析
</canvas>
<script type="text/javascript">
	var box = document.querySelector("#box");
	var ctx = box.getContext("2d");
	ctx.font ='20px Arial';
	ctx.fillStyle = "skyblue";
	// 填充的文字，第二三个参数是起始位置x,y的坐标，第四个是范围就在在哪里写这个文字
	ctx.fillText("这个文字是我绘制出来的",200,100,300);
	ctx.strokeStyle = '#060'
	// 默认的文字在坐标起点，center就是文字在坐标中心
	ctx.textAlign = "center";
	// 绘制的文字
	ctx.strokeText("这个文字是我绘制出来的",200,150,300);
</script>

效果图

清除绘制的元素

清除绘制使用clearRect()，第一二个参数是清除位置的坐标，第三四个元素是清除的大小

clearRect(x, y, width, height)

实例

<style type="text/css">
	#box {
		border: 1px black solid;
	}
</style>

<canvas id="box" width="1200px" height="600px">
	如果不认识我，就直接显示文字，认识就解析
</canvas>
<script type="text/javascript">
	var box = document.querySelector("#box");
	var ctx = box.getContext("2d");
	ctx.fillStyle = "skyblue";
	// 坐标，宽长
	ctx.fillRect(100,100,400,500);
	// 清除画布里面的元素
	ctx.clearRect(200,200,40,40);
</script>

效果图

绘制图片

绘制图片使用drawImage()，第一个参数是图片的id，第二三是图片的宽高

drawImage(img1,100,200)

实例1

<style type="text/css">
	#box {
		border: 1px black solid;
	}
</style>
<img src="1.jpg" id="img1" width="200px" height="200px">
<canvas id="box" width="600px" height="600px">
	如果不认识我，就直接显示文字，认识就解析
</canvas>
<script type="text/javascript">
	var box = document.querySelector("#box");.
	var ctx = box.getContext("2d");
	// 写图片编码
	img1.onload = function(){
		// 当img把scr的资源加载完毕了这个函数才会运行
		ctx.drawImage(img1,100,200)
	}
</script>
	 

效果图

实例2

也可以这样加载绘制图片，js以外的代码都是用的上一个实例的，效果也和上面的效果图一样，这里就不在展示了

<script>
	window.onload = function(){
		var box = document.querySelector("#box");
		var ctx = box.getContext("2d");
		var img1 = document.querySelector("#img1");
		ctx.drawImage(img1,100,200)
	}
	
</script>

实例3

drawImage()，还有剪裁图片的功能，就是后面四个参数，前两个是剪裁的坐标，后两个是剪裁的大小

<script>
	var box = document.querySelector("#box");
	var ctx = box.getContext("2d");
	var img1 = new Image();
	img1.src="1.jpg";
	img1.onload=function(){
		// 剪裁的坐标，裁剪的宽高，和显示在页面的坐标和宽高
		ctx.drawImage(img1,900,100,400,600,0,0,400,600)
	}
</script>

效果图

实例4

给图片加一个定时器，就可以做出动画效果，这里不好展示动画效果，就不展示了

var box = document.querySelector("#box");
	var ctx = box.getContext("2d");
	var img1 = new Image();
	img1.src="1.jpg";
	img1.onload=function(){
		// 剪裁的坐标，裁剪的宽高，和显示在页面的坐标和宽高
		ctx.drawImage(img1,900,100,400,600,0,0,400,600)
	}
img1.onload=function(){
	// 剪裁的坐标，裁剪的宽高，和显示在页面的坐标和宽高
	// ctx.drawImage(img1,900,100,400,600,0,0,400,600)
	var i = 100;
	var n = 0;
	setInterval(()=>{
		n++
		n = n%6;
		ctx.clearRect(n*250,200,600,600);
		ctx.drawImage(img1,n*250,200,450,600,0,0,450,600)
	},500)
}
</script>

前端的缓存技术

什么是缓存？

• 把数据保存在磁盘中这就是缓存技术

前端有三种缓存技术

• cookies
• sessionStorage
• localStorage

cookies实例

<input type="text" id="idcard">
<input type="text" id="pwd">
<button onclick="fn()">存入用户输入的值</button>	
<script>
	function fn(){
		var idcard = document.querySelector("#idcard");
		var pwd = document.querySelector("#pwd");
		var ex = new Date(new Date().getTime()+1000*60*60*24*30) 
		// 分号是断句，前面是用户缓存的东西，后面是对这些东西的一些设置
		document.cookie = `idcard=${idcard.value}&pwd=${pwd.value};expires=${ex}`;
	}
	window.onload=function(){
		// 获取cookies值
		console.log(document.cookie);
	}	
</script>
		

效果图

localStorage

• setItem()：将对应的名字和值传递进去，可以实现数据存储；

• getItem()：将名字传递进去，可以获取对应的值；

• removeItem()：将名字传递进去，可以删除对应的值；

• clear()：删除所有的缓存值，不需要参数；

• length：属性，获取键值对总数；

• key()：传入位置数，获取存储的值的名字；

localStorage实例

<input type="text" id="box1">
<button onclick="localStorage1()">LocalStorage存数据</button>
<button onclick="getlocalStorage1()">LocalStorage取数据</button>
<button onclick="clear1()">LocalStorage清除数据</button>
<script>
	function localStorage1(){
		window.localStorage.setItem("username","张三");
		window.localStorage.setItem("头像","http://www.touxiang.com")
	}
	function getlocalStorage1(){
		var re=window.localStorage.getItem("username")
		console.log(re)			
	}
	function clear1(){
		window.localStorage.clear()
	}
</script>

sessionStorage

• sessionStorage.length ：​返回一个整数，表示存储在 sessionStorage 对象中的数据项(键值对)数量。

• sessionStorage.key(int index) ：返回当前 sessionStorage 对象的第index序号的key名称。若没有返null。

• sessionStorage.getItem(string key) ：返回键名(key)对应的值(value)。若没有返回null。

• sessionStorage.setItem(string key, string value) ：该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。

• sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。

• sessionStorage.clear() ：清除 sessionStorage 对象所有的项。

sessionStorage实例

其实和localStorage是一样的，只是改了一个名字而已

<input type="text" id="box1">
 <button onclick="sessionStorage1()">sessionStorage存数据</button>
 <button onclick="getsessionStorage1()">sessionStorage取数据</button>
 <button onclick="clear1()">sessionStorage清除数据</button>
 <script>
	function sessionStorage1(){
		window.sessionStorage.setItem("username","张三");
		window.sessionStorage.setItem("头像","http://www.touxiang.com")
	}
	function getsessionStorage1(){
		var re=window.sessionStorage.getItem("username")
		console.log(re)			
	}
	function clear1(){
		window.sessionStorage.clear()
	}
</script>

localStorage和sessionStorage区别

localStorage和sessionStorage存储数据的有效期和作用域不同：

（1）localStorage

​localStorage：存储的数据是永久的，当然用户可以清除这些缓存数据的； 比如清除历史记录就可以清除这些数据；

​localStorage的作用域限制在文档源； 文档源由协议、域名、端口三者来确定；
​这种情况下，localStorage存储的数据是不能相互访问的； 即便他们来自同一台服务器；

​localStorage同源的文档之间可以相互访问和修改相同名称的数据；

​localStorage受浏览器厂商的限制，chrome下存储的数据，360浏览器下不可访问； 会得到‘Invalid Date’；

（2）sessionStorage

​sessionStorage存储的数据在窗口或标签关闭时，数据就会丢失； 在一个标签前进后退时数据不会丢失，这样我们就可以获取上次访问时产生的相关信息； 随着现代浏览器越来越强大，具体的声明周期还和浏览器功能有关；

​sessionStorage在localStorage的同源策略基础上，有更严格的限制：

​他还被限制在窗口中，意思是同一个窗口或标签页的不同页面之间可以共享sessionStorage；

​但是不同的窗口或标签页之间不能共享sessionStorage，即便他们是同一个页面地址；

​窗口是指顶级窗口，如果是多个iframe，他们之间共享sessionStorage；

localStorage、sessionStorage、cookie三者的区别

1. 存储大小
   cookie数据大小不能超过4k ；
   sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大；

2. 有效时间
   localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
   sessionStorage 数据在当前浏览器窗口关闭后自动删除；
   cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；

3. 数据与服务器之间的交互方式
   cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端；
   sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；

4. 作用域
   localStorage的作用域限制在文档源的；
   localStorage同源的文档之间可以相互访问和修改相同名称的数据；
   localStorage受浏览器厂商的限制，chrome下存储的数据，360浏览器下不可访问； 会得到‘Invalid Date’；
   sessionStorage在localStorage的同源策略基础之上，还有更严格的限制：
   他还被限制在窗口中，意思是同一个窗口或标签页的不同页面之间可以共享sessionStorage；
   但是不同的窗口或标签页之间不能共享sessionStorage，即便他们是同一个页面地址；
   这里的窗口是顶级窗口，如果里面有多个iframe，他们之间共享sessionStorage；