当前位置：首页 > article >正文

canvas绘制简单动画和本地储存

article 2025/8/23 2:50:10

一、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');
}