一、canvas绘制简单动画
- 在canvas画布中制作动画相对来说很简单,实际上就是不断变化坐标、擦除、重绘、的过程。
1.使用setInterval 方法设置动画的间隔时间。
setInterval(code,millisec)
setInterval方法html中固有方法,这个方法接受两个参数,第一个函数表示执行动画的函数,第二个参数为间隔时间,单位是(毫秒)。
2.用来绘图的函数
1)、通过不断的变换X和Y的坐标来实现动画效果。
2)、在该函数中先用clearRect方法将画布整体或者是局部擦除。
擦除图像clearRect方法:
context.fillRect(x,y,width,height);
x是指我们起点的横坐标,y是指我们起点的纵坐标,width是指擦子的长度,height是指擦子的高度。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas绘制动画</title>
<script type="text/javascript" src="canvas.js"></script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
var i;
function draw(id){
var canvas = document.getElementById(id);
context = canvas.getContext('2d');
setInterval(painting,10);
i = 0;
}
function painting(){
context.fillStyle = "green";
context.fillRect(i,i,10,10);
context.fillRect(400-i,400-i,10,10);
context.fillRect(i,400-i,10,10);
context.fillRect(400-i,i,10,10);
i++;
}
网页描述:
- 在400 × 400的画布的四周出现四条10 ×10的射线于中心点相交。
二、Web Storsge本地存储
1、sessionStorage临时保存
- 就是把数据保存在session对象之中。
session就是在打开网站到关闭网站之间要求进行保存的数据。
sessionStorage临时保存的用法:
sessionStorage.setitme(‘key’,‘value’);
//或者是sessionStorage.key = ‘value’;
sessionStorage临时数据读取的方法:
变量=sessionStorage.getItem(‘key’)
//或者是sessionStorage.key;
2、localStorage永久保存
- 就是将数据保存在客户端本地的硬件设备至上面,如果浏览器被关闭,这个数据不会丢失,下次打开可以继续使用。这个功能就是我们的localStorage永久保存功能。
永久保存数据的方法:
localStorage.setItem(‘key’,‘value’);
//或者
localstorage.key;
读取的方法:
变量=localStorage.getItem(‘key’);
//或者
变量=localStorage.key;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Web Storage本地储存</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<h1>Web Storage本地储存</h1>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input');">
<input type="button" value="读取数据" onclick="loadStorage('msg');">
</body>
</html>
三、实战简单的访客留言板
1. saveStorage函数
使用“new Date().getTime()”语句来获取当前的日期和时间戳,然后使用localStorage.setItem将获取到的时间戳作为键值,并将文本框中的数据作为键名进行保存。保存后使用loadStorage函数在页面上显示保存后的数据。
2. loadStorage函数
- 这个函数取得保存后的所有数据,然后以表格的形式进行显示。
两个重要的属性:
1)、loadStorage.length
所有保存在localStorage中的数据条数。
2)、localStorage.key(index)
想要得到的数据的索引号作为index参数传入,可以得到得到localStorage中与这个索引号对应的 数据。
3)、clearStorage函数
将保存在localStorage中的数据全部清除。
用法:localStorage.clear();
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单的网页留言板</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<h1>简单的网页留言板</h1>
<textarea id="dome" cols="60" rows="10"></textarea>
<br/>
<input type="button" value="保存" onclick="saveStorage('dome');">
<input type="button" value="清空" onclick="clearStorage('msg');">
<input type="button" value="读取" onclick="loadStorage('msg');">
<hr>
<p id="msg"></p>
</body>
</html>
function saveStorage(id){
var data = document.getElementById(id).value;
var time = new Date().getTime();
localStorage.setItem(time,data);
alert("数据已经被保存!");
loadStorage('msg');
}
function loadStorage(id){
var reselt = '<table border="1">';
for(var i=0;i<localStorage.length;i++)
{
var value = localStorage.getItem( localStorage.key(i));
var date = new Date();
date.setTime( localStorage.key(i));
var datestr = date.toGMTString();
reselt += '<tr><td>'+'这是第'+i+'条数据</td><td>'+ localStorage.getItem( localStorage.key(i))+'</td><td>'+datestr+'</td></tr>';
}
reselt += '</table>';
var target = document.getElementById(id);
target.innerHTML = reselt;
}
function clearStorage(id){
localStorage.clear();
alert("数据已经被成功删除!");
loadStorage('msg');
}
网页内容显示: