H5新增功能01

目录

• x
• 画布(Canvas) API
  • 为什么不在style中设置width和height呢？
  • 方法和属性(带()的是方法，不带的是属性)：
  • 绘制线条
  • stroke()　　绘制线段；
  • 画圆：
  • 画布中插入图片；drawImage()
  • 插入文字：
• localStorage和sessionStorage
  • html5中的Web Storage包括了两种存储方式：
  • localStorage与sessionStorage的封装（可设置过期时间）
• webworker, websocket
  • 创建一个Socket实例

Top~~

画布(Canvas) API

• canvas（画布）主要是位图　　svg（矢量图）

• canvas标签，必须要写的3个属性 id　　width　　height　　

为什么不在style中设置width和height呢？

因为这设置width和height话会有位移差；
位移差：在画布里面的元素有偏差；

复制　　//js中每次使用canvas，都要设置一个绘图环境，然后会得到一个对象，然后对其进行操作；

　　var c=document.getElementById("") canvas标签的id值；

　　var d=c.getContext("2d")　　设置绘图属性；

　　//然后得到d这个对象，就可以对其进行操作元素里面的属性和方法；

方法和属性(带()的是方法，不带的是属性)：

　　　　fillRect()：绘制一个填充方块，默认颜色是黑色； 参数：x,y,w,h (坐标和宽高)

　　　　fillStyle：填充颜色 属性值：想要的颜色；

　　　　strokeRect()：绘制边框的方框； （如果绘制边框的话，会有2px的偏差，所以设置坐标的话需要在原有的基础上加上0.5），参数同fillRect()

　　　　lineWidth：边框粗细；

　　　　strokeStyle：线条颜色；

　　　　lineJoin：边框圆角 属性值：round 圆，　　

　　　　lineCap：线条圆角；

绘制线条

　　　　moveTo()：绘制线段的起点　　参数 x,y 　坐标位置；

　　　　lineTo()：绘制线段的领点　　参数 x,y　　坐标位置 ； （最后一个lineTo就代表终点）

　　　　线条只能有一个moveTo()，但却可以有很多lineTo()

stroke()　　绘制线段；

　　　　beginPath　　开始路径 必须要写对应的关闭路径　　

　　　　closePath　　关闭路径

　　　　两者同时出现，将绘制路径闭合，起始点和结尾点，首尾相连；

　　　　rect()　　绘制方块，及不带填充色和线框；

　　　　fill()　　填充颜色；

　　　　clearRect(x,y,width,height)　　清除矩形区域

　　　　save()　　restore()　　这两个方法成对出现，中间的属性样式，之影响内部，不影响外部；

画圆：

　　　 arc()：参数（x,y,半径，开始弧度，结束弧度，时针方向）；

　　 x,y坐标　　半径，圆的大小， 开始弧度，一般都是0，结束弧度，一般都是 (0-360)*Math.PI/180，　　时针方向，true 逆时针，false 顺时针　　

复制   translate()　平移，画布大小位置不变，起始坐标变了   参数 x,y 

　　 旋转：rotate()　　同translate原理；

　　 需注意一点，需要先通过 translate() 确定起始坐标点，在来操作rotate会比较好

　　 缩放：scale(0.5，0.5)　　画布缩放，就是将画布向后移动，跟人的视距就远了，近大远小；

画布中插入图片；drawImage()

复制　　　　var img=new Image()　　

　　　　img.src="图片路径"　　

　　　　img.onload=function(){

　　　　　　d.drawImage(img,x,y,w,h)　　　　d就是画布对象，img图片对象，坐标宽高，drawImage()在画布中插入图片

　　　　}　　　　

插入文字：

　　　　strokeText()　插入的文字带边框　　参数: "输入的内容" , x , y　　(坐标)

　　　　fillText()　　不带边框　参数同strokeText()

　　　　textAlign：相对字体的起始点，水平居中

　　　　textBaseline：移到字体的起始点，垂直居中

　　　　font：字体大小和字形

Top~~

localStorage和sessionStorage

html5中的Web Storage包括了两种存储方式：

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问
并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅、是会话级别的存储。只允许同一窗口访问。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。同源可以读取并修改localStorage数据。

他们储存的对象类型均为字符串类型；

localStorage与sessionStorage的封装（可设置过期时间）

复制//存储,可设置过期时间
function set(key, value, expires) {
    // console.log(key);
    let params = { key, value, expires };
    if (expires) {
        // 记录何时将值存入缓存，毫秒级
        var data = Object.assign(params, { startTime: new Date().getTime() });
        localStorage.setItem(key, JSON.stringify(data));
    } else {
        if (Object.prototype.toString.call(value) == '[object Object]') {
            value = JSON.stringify(value);
        }
        if (Object.prototype.toString.call(value) == '[object Array]') {
            value = JSON.stringify(value);
        }
        localStorage.setItem(key, value);
    }
}
//取出
function get1(key) {
    let item = localStorage.getItem(key);
    // 先将拿到的试着进行json转为对象的形式
    try {
        item = JSON.parse(item);
    } catch (error) {
        // eslint-disable-next-line no-self-assign
        item = item;
    }
    // 如果有startTime的值，说明设置了失效时间
    if (item && item.startTime) {
        let date = new Date().getTime();
        // 如果大于就是过期了，如果小于或等于就还没过期
        if (date - item.startTime > item.expires) {
            localStorage.removeItem(name);
            return false;
        } else {
            return item.value;
        }
    } else {
        return item;
    }
}

//导出
module.exports = {
    set,
    localget:get1
};
存：request.set('uid',option.uid,43200000);//时间单位毫秒级
      request.set('token',option.token,43200000);
取：let uid = request.localget('uid');
      let token = request.localget('token');

Top~~

webworker, websocket

• web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程，这样在进行复杂且耗时的操作时就不会阻塞主线程了。
  HTML5 History两个新增的API：history.pushState 和 history.replaceState，两个 API 都会操作浏览器的历史记录，而不会引起页面的刷新。

Hash就是url 中看到 # ,我们需要一个根据监听哈希变化触发的事件( hashchange) 事件。我们用 window.location处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。 可以为hash的改变添加监听事件：

window.addEventListener("hashchange", funcRef, false)

• WebSocket 使用ws或wss协议，Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信

创建一个Socket实例

复制// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080');
// 打开Socket
socket.onopen = function(event) {
  // 发送一个初始化消息
  socket.send('I am the client and I\'m listening!');
  // 监听消息
  socket.onmessage = function(event) {
    console.log('Client received a message',event);
  };
  // 监听Socket的关闭
  socket.onclose = function(event) {
    console.log('Client notified socket has closed',event);
  };
  // 关闭Socket....
  //socket.close()
};