知识点一：H5拖拽
1、设置元素为可拖放
首先，为了使元素可拖动，把draggable属性设置为true：
2、拖动什么 ondragstart和setData()
然后，规定当元素被拖动时，ondragstart属性调用了一个函数，start(event)，它规定了被拖动的数据。
在所有的拖放事件中都提供了一个数据传输对象dataTransfer，主要是用于在源对象和目标对象之间传递数据。setData()存入源对象的数据第一个参数是存的数据类型，第二个是存的数据
3、放到何处 ondragover
ondragover事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
4、进行放置 ondrop
当放置被拖数据时，会发生drop事件。
5、原理：
<div id="div1" ondrop="drop(event)" ondragover="over(event)"></div>
<img id="img1" src="images/logo.png" draggable="true" ondragstart="event(event)" >
1、定义方法
//开始拖拽
function start(event){
//dataTransfer.setData 设置属性
//相当于设置一个属性用来存储img的id值，目的：反方便再放下的时候可以知道放下的是谁
event. dataTransfer.setData(‘a’,event.target.id);
}
准备放下
function drop(event){
event.preventDefault();//阻止事件的默认行为
var data=event. dataTransfer.getData(‘a’);
document.getElementById(‘box’).appendChild(document.getElementById(data));
}
已经放下
function over(event){
event.preventDefault();//阻止事件的默认行为
}
知识点二：H5绘图
1、创建一个画布（Canvas）
一个画布在网页中是一个矩形框，通过<canvas>元素来绘制。注意:默认情况下<canvas>元素没有边框和内容。
属性：height、width
<canvas id="myCanvas" width="200" height="100" style="border:1pxsolid#000000;"></canvas>
2、使用JavaScript来绘制图像
//1、获取元素
var c=document.getElementById("myCanvas");
//2、告诉浏览器用什么方式渲染
var ctx=c.getContext(‘2d’);
//3、开始画图
//分析，学会画直线，画圆
ctx.fillStyle=’red’;
//(1)、画矩形，第一个参数X轴坐标，第二个参数Y轴坐标，第三个参数矩形的宽，第四个参数矩形的高
ctx.fillRect(0,0,150,50);
//(2)、画线
ctx.moveTo(0,0);//起始坐标
ctx.lineTo(150,150);//结束坐标
ctx.strokeStyle=’blue’;//填充颜色
ctx.stroke();//画线
//(3)、画圆
ctx.beginPath();
//第一个参数X轴坐标，第二个参数Y轴坐标，第三个参数圆的半径，第四个参数圆的起始位置，第五个参数圆的结束位置，第六个参数方向(true代表逆时针方向，false代表顺时针方向，默认是false)
ctx.arc(100,100,100,0,2*Math.PI,true);
//填充颜色
ctx.fillStyle=’red’;
ctx.fill();
ctx.stroke();
//(4)、画文本
ctx.font=’30px Arial’;
ctx.fillText(‘Hello’,100,100);
//(5)、渐变填色
createLinearGradient(x,y,x1,y1)创建线条渐变，第一个参数X轴坐标，第二个参数Y轴坐标，第三个参数扩散半径，第四个参数
createRadialGradient(x,y,r,x1,y1,r1)创建一个径向/圆渐变，前三个参数为起始圆的坐标及半径，后三个参数为终止圆的坐标及半径
ctx.font=’30px Arial’；
var grad=ctx.createLinearGradient(0,0,c.width,0);
grad.addColorStop(‘0’,’red’);
grad. addColorStop (‘1’,’green’);
ctx.fillStyle=grad;
ctx.fillText(‘Hello’,100,100);
知识点三：H5的web存储
1、localStorage对象
用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
不管是localStorage，还是sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
(1)、保存数据：localStorage.setItem(key,value);
(2)、读取数据：localStorage.getItem(key);
(3)、删除单个数据：localStorage.removeItem(key);
(4)、删除所有数据：localStorage.clear();
(5)、得到某个索引的key：localStorage.key(index);
2、sessionStorage对象
sessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
3、cookie
生命周期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭，存放数据大小为4k左右，有个数限制，（各浏览器不同），一般不能超过20个，，缺点是不能存储大数据且不易读取。。。。