画布,拖放,web存储和websocket

1. 画布

canvas 
    定义：属于html元素 H5新元素 需要结合js 用来绘制图形
    在页面上放置一个canvas元素 就相当于放置了一块画布
    可以绘制路径 矩形 圆形 字符 图像

    属性：
      width    默认值 300px
      height   默认值 150px
      注意点：canvas需要写闭合标签
      <canvas></canvas>
      一般不建议使用css设置它的宽高

    方法：
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = 'green';
        ctx.fillRect(10, 10, 20, 20);
      fillRect(x,y,width,height)
          绘制一个矩形图案（填充）
      strokeRect(10, 60, 50, 50)
          绘制矩形边框
      clearRect(10, 10, 100, 100)
        清除指定矩形区域，让清除部分完全透明
      beginPath()
        新建一条路径
        然后通常会使用moveTo去设置你的起始位置
        然后去绘制
      closePath()
        闭合路径
        如果我们绘制的路径自己就是闭合的 那我们不需要调用这个方法
      fill()
        填充路径的内容区域 可以不用 closePath()
      stroke()
        通过线条绘制图形轮廓 需要使用 closePath()
      moveTo()

     lineTo()
        绘制直线
      arc(x,y,r,startAngle,endAngle,anticlockwise)

        anticlockwise:默认顺时针方向
      
      fillStyle()
        控制色彩
        颜色值 red #000999 rgb rgba 
      strokeStyle()

      lineWidth

---

2. 拖放

事件
    dragstart 按下鼠标按键 并开始移动鼠标 会触发dragstart事件 我们通过ondragstart来调用

方法

    drag      当dragstart开始 会持续触发drag事件 类似mousemove事件

    dragend   当拖放停止时（鼠标按键抬起时） 会触发

    dragenter 拖动元素被拖动到放置元素上

    dragover  拖动元素在放置元素范围内移动

    dragleave 拖动元素从放置元素上移出

    drop      放置事件

   

拖放事件 生命周期
      dragstart>drag>dragenter>dragover>drop>dragend

    数据交互
      通过dataTransfer去保存 获取数据 只能在拖放事件处理程序中使用
      event.dataTransfer
      方法：
        dataTransfer.setData(key,value);
        dataTransfer.getData(key);

    定义放置目标
      <div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>

    定义拖动元素
        <img id="img" draggable="true" οndragstart="drag(event)">

---

3. Web存储、浏览器储存、客户端存储技术

    sessionStorage
      会话存储 注意容量限制
        打开浏览器标签 就是一个会话 同样的url打开两个 就是两个会话
        刷新、重新加载 会话会保持
        关闭会话时 session 会被清除
        恢复会话   session 会恢复回来

      方法：
        setItem(key,value);
        getItem(key);
        removeItem(key);
        clear();        // 删除所有的session
        key(index);

      属性
        length
    localStorage
        本地存储对象 只能存字符串
        不随会话消失而消失 浏览器关了都不影响

websocket
  http ajax轮询 获取消息
  节省服务器资源和带宽 并且能够很好的进行实时通信 但是这个技术 需要后台支持
  浏览器和服务器进行一次握手 就可以创建持久性的连接，并进行双向数据传输。

  open        Socket.onopen    连接建立时触发
  message    Socket.onmessage    客户端接收服务端数据时触发
  error        Socket.onerror    通信发生错误时触发
  close        Socket.onclose    连接关闭时触发

  Socket.readyState    
    只读属性 readyState 表示连接状态，可以是以下值：
    0 - 表示连接尚未建立。
    1 - 表示连接已建立，可以进行通信。
    2 - 表示连接正在进行关闭。
    3 - 表示连接已经关闭或者连接不能打开。