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進行資料儲存。當用戶關閉瀏覽器視窗後，資料會被刪除。