HTML5 6.3笔记

1.canvas动画

canvas小示例
在canvas画布中制作动画相对来说很简单，实际上就是不断变化坐标、擦除、重绘、的过程。
1、使用setInterval 方法设置动画的间隔时间。
setInterval(code,millisec)
setInterval方法html中固有方法，这个方法接受两个参数，第一个函数表示执行动画的函数，
第二个参数为间隔时间，单位是（毫秒）。
2、用来绘图的函数
1）、通过不断的变换X和Y的坐标来实现动函效果。
2）、在该函数中先用clearRect方法将画布整体或者是局部擦除。
擦除图像clearRect方法：
context.clearRect(x,y,width,height);
x是指我们起点的横坐标，y是指我们起点的纵坐标，width是指擦除的长度，height是指擦除的
高度。

var i;
var context;
var width,height;
function draw(id) {
    var canvas=document.getElementById(id);
     context=canvas.getContext('2d');
     width=canvas.width;
     height=canvas.height;
    setInterval(painting,100);
    i=0;
}
function painting() {
    context.fillStyle="green";
    context.fillRect(i,0,10,10);
    context.fillRect(400-i,400-i,10,10);
    i++; //连续点

    context.fillStyle="#fff";
    context.clearRect(0,0,width,height);
    context.fillStyle="green";
    context.fillRect(i,20,10,10);
    i=i+20;// 擦掉整幅图再画一个点
}

关于setInterval
setInterval(test,1000);
setInterval(test(),1000);
setInterval(“test()”,1000);

function test(){
console.log(1)
}
三种不同的调用方式。

（1）setInterval(test,1000)，这是一种很常见的调用方法，一面打印一次1，没问题。

（2）setInterval(test(),1000)，只打印了一次1。基础好的估计一下就看出来了，test()这种方式，明显就是对函数的直接调用了，也就是说，setInterval函数还没执行前，test()就已经调用了，要想这个函数持续被调用，那么函数就必须要有返回可执行的函数

setInterval(test(),1000);

function test(){
return function(){
console.log(1)
}

}
（3）setInterval(“test()”,1000)，全局作用域下和第一种一样

2.webStorage 存储

sessionStorage临时保存
就是把数据保存在session对象之中。
session就是在打开网站到关闭网站之间要求进行保存的数据。

localStorage永久保存
就是将数据保存在春户端本地的硬件设备至上面，如果浏览器被关闭，这个数据不会丢失，下次打开可以维
续使用。这个功能就是我们的localStorage永久保存功能。

function saveStorage(id) {
    var target= document.getElementById(id);
    var str=target.value;
    sessionStorage.setItem("mess",str);

}
function loadStorage(id) {
    var target=document.getElementById(id);
    var msg=sessionStorage.getItem("mess");
    target.innerHTML=msg;
}

要变成永久储存 只需把sessionStorage改成localStorage

3.简易留言板

制作留言板需要使用到的函数有3个
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();

function saveStorage(id) {
    var date=document.getElementById(id).value;
    var time=new Date().getTime();
    localStorage.setItem(time,date);
    alert("数据已经保存");
    loadStorage('msg');
}

function loadStorage(id) {
    var reselt='<table border="1">';
    for(var i=0;i<localStorage.length;i++){
        var key=localStorage.key(i);//索引号默认0开始
        var value=localStorage.getItem(key);
        var date=new Date();
        date.setTime(key);
        var datestr=date.toGMTString();
        reselt+='<tr><td>'+'这是第'+i+'条数据</td><td>'+value+'</td><td>'+datestr+'</td></tr>';
    }

    reselt+='</table>';
    var target=document.getElementById(id);
    target.innerHTML=reselt;
}

function clearStorage(id) {
    localStorage.clear();
    alert("成功清除");
    loadStorage('msg');
}