HTML5（二）

1、拖拽三个方法：

  首先需要设置元素：dragable = true;

  开始拖拽：

ondragstar="start(event)";

 function start(event){
        event.dataTransfer.setData('a',event.target.id) 
  } 

    a存放id。

  拖拽中

 ondrop="drop(event)";
  function drop (event){
     event.preventDefault();
     var data =  event.dataTransfer.getData('a');
     document.getElementById('xx').appendChild(document.getElementById(data));    获取元素并将拖拽的东西加入到元素中去
  }

  结束拖拽

ondragover="over(over)";
  function over (event){
        event.preventDefault();
  }

2、canvas

   三部曲：1、设置宽高边框 2、获取元素、告诉浏览器用什么方式选   var ctx = c.getContext('2d'); 3、画图
  1、画矩形

ctx.fillStyle='red';  
  ctx.fillRect(300,300,150,50); x,y,w,h

  2、画直线

 ctx.moveTo(x1,y1);
   ctx.lineTo(x2.y2);
   ctx.stroke();

  3、画圆

ctx.beginPath();
  ctx.arc(x,y,r,开始位置，结束位置，方向）
  ctx.stroke();

  4、画文本

ctx.font = '30px Arial';
  ctx.fillText('HELLO',x,y);

  5、渐变色
        1、线条渐变  createLinearGradient(x1,y1,x2,y2);
        2、径向/圆渐变 createRadialGradient(x1,y1,r1,x2,y2,r2)

var grad = ctx.createRadialGradient(300,300,100,300,300,180);
  grad.addColorStart('0','yellow');
  grad.addColorStart('0.3','blue');
  grad.addColorStart('0.6','orange');
  grad.addColorStart('1','red');
  ctx.fillStyle = grad;
  ctx.fill（）；
  ctx.stroke();

 

3.HTML5的web存储

(1)、localStorage对象

用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。localStorage对象存储的数据没有时间限制。

不管是localStorage，还是sessionStorage，可使用的API都相同，常用的有：

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

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

删除单个数据：localStorage.removeItem(key);//移除之后再获取值，返回null

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

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

(2)、sessionStorage对象

sessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。