H5拖拽、绘画、web存储

知识点一：H5拖拽

1、设置元素为可拖放

首先，为了使元素可拖动，把draggable属性设置为true：

2、拖动什么 ondragstart和setData()

然后，规定当元素被拖动时，ondragstart属性调用了一个函数，start(event)，它规定了被拖动的数据。

在所有的拖放事件中都提供了一个数据传输对象dataTransfer，主要是用于在源对象和目标对象之间传递数据。setData()存入源对象的数据第一个参数是存的数据类型，第二个是存的数据

3、放到何处 ondragover

ondragover事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

4、进行放置 ondrop

当放置被拖数据时，会发生drop事件。

5、原理：

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

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个，，缺点是不能存储大数据且不易读取。。。。