HTML5高级部分

cookie：储存在用户本地终端上的数据；

var test=document.cookie;                                         //cookie的获取

document.cookie = "[email protected];expires="+Date.toGMTString();

                                                                                                                               //cookie的创建 时间使用toGMTString()转化

---

当浏览器关闭时，cookie存储的内容会被清除。

sessionStorage:针对一个session的数据存储，浏览器不关闭，内容一直存在；

localStorage:没有时间限制的存储；

保存数据：localStorage.setItem('key','value');

读取数据：localStorage.getItem('key');

删除单个数据：localStorage.removeItem('key');

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

---

HTML5中的video

currentTime:设置属性值或者返回音频视频当前位置；（以秒计）

video自动播放指定位置

var video1;

        window.onload = function () {

            video1 = document.getElementById("video1");

            //计时器

            function getTime() {

                localStorage.PlayTime =  video1.currentTime;      //播放时间=指定时间；

            }

            setInterval(getTime,500);

            //打开的时候，获取本地的localStorage  一定确保这个值是存在的

            if(localStorage.PlayTime != undefined && localStorage.PlayTime != null){

                //在苹果的浏览器，localStorage的字符串给其他带有数字的参数的属性或者方法的时候，用字符串不一定适合.

                video1.currentTime = parseInt(localStorage.PlayTime);

            }

        }

---

video事件： 

video.play()    播放；

video.pause()  停止；

video.load()    重载;

---

HTML5  DOM知识拓展

document.querySelector("#id  .class 标签名")，但只能获取第一个节点；

document.querySelectorAll("#id  .class 标签名"),获取一个类型的选择器。

data-*自定义属性

1.第一种获取data自定义属性：

var p1 = document.querySelector("#p1");

            var a = p1.getAttribute("data-user");

---

2.第二种获取data自定义属性方式：

var c = p1.dataset.user

关于canvas画布

标签定义图形，使用脚本来绘制图形。

使用JavaScript在网页上绘制图形。

canvas画布使用方法：

1.在body中定义canvas标签；

2.在JavaScript中获取节点；

3.通过getContext（）获取上下文，一般是getContext("2d");

4.如果需要画图，那么需要重新定义路线。每一个图都需要重新定义路线。ctx.beginPath();

5.如果要定义一个实心矩形：

ctx.fillRect(x,y,width,height);

fillStyle="color";

ctx.fill();

---

6.空心矩形：

ctx.fillRect(x,y,width,height);

ctx.stroke();

---

7.直线线条

定义开始路线：ctx.moveTo(50,50);//开始坐标

ctx.lineTo(150,50);//结束坐标

ctx.stroke();  //实现

---

8.绘制文字

实体文字：

ctx.font="字体大小，字体样式";

ctx.fillText("内容",坐标);

---

空心文字：

ctx.font="字体大小，字体样式";

ctx.strokeText("内容",坐标);

---

9.绘制一个圆

cxt.arc(50,50,50,0,Math.PI*2);

cxt.stroke();

---

10.创建径向渐变

var gar=cxt.createLinearGradient(120,120,120,240,240,250);

gar.addColorStop(0,'pink');

 gar.addColorStop(1,'green');

cxt.fillStyle = gar;

cxt.fillRect(120,120,150,80);

---

11.把图片放在画布上

var img1=document.querySelector("#img1");

cxt.beginPath();

cxt.drawImage(img1,0,0);

---

12.鼠标在画布上移动

window.onload=function(){

var canvas1=document.querySelector("#canvas1");

var color=document.querySelector("#color");

var btn=document.querySelector("#btn1");

var ctx=canvas1.getContext("2d");

var kaiguan=false;

ctx.strokeStyle="#000000";

canvas1.onmousedown = function(event){

kaiguan = true;

ctx.beginPath();

var x=event.clientX;

var y=event.clientY;

ctx.moveTo(x,y);

}

canvas1.onmousemove=function(event){

if(kaiguan){

var x = event.clientX;

var y = event.clientY;

ctx.lineTo(x,y);

ctx.stroke();

}

}

canvas1.onmouseup = function(){

kaiguan=false;

}

color.onchange = function(){

ctx.strokeStyle=this.value;

}

btn.onclick=function(){

ctx.clearRect(0,0,600,600);

}

}

---