ES6的H5相关内容

画图：canvas--签名，刮奖，画布

线：坐标，粗细，颜色
.lineWidth=6;//线的粗细，单位是px
.strokeStyle="css颜色值";

.moveTo(x,y),开始落笔位置
.lineTo(x,y),结束位置
.stroke();绘制线条
.beginPath();//开始新路径
.closePath();//闭合路径
.lineCap="round";//圆形端点

矩形：
.rect(x,y,width,height);需要设置线条或者填充色
.fillRect();直接绘制填充色的矩形
.strokeRect();直接绘制线条矩形

圆形：
.arc(圆心x,圆心y,半径,开始弧度0,结束弧度,方向);弧度以3点钟方向为0，6-π/2，9-π，12-3π/2,整圆是2π
方向默认false，顺时针

文字：
.strokeText("内容",x,y);
.font="30px 微软雅黑";

清除内容：
.clearRect(x,y,width,height);//清除矩形区域
重新设置宽高：c.width=c.width

canvas.toDataURL();//将画布内容保存成base64形式

ctx.drawImage(img,图片开始裁切x,图片开始裁切y,裁剪的宽度，裁剪的高度，放置位置x，放置位置y，放置宽度，放置高度)
ctx.drawImage(img,放置位置x，放置位置y，放置宽度，放置高度)

本地存储
客户端存储
localStorage
localStorage.setItem("key","value"),value是字符串形式，如果是数组、对象，需要转成json字符串
localStorage.getItem("key")
localStorage.removeItem("key"),删除指定存储
localStorage.clear(),删除全部存储

特点：永久存储在客户端，只能手动删除，不同浏览器不能共用数据，单条数据最大支持5M，如果超出会报错,同源策略(协议、域名、端口都一致)

1B=1个英文字符
1KB=1024B
1M=1024K

sessionStorage:与localStorage一致，区别在会话存储(只在当前页生效，关闭页面后删除)

cookie:字符串，包含键值对，过期时间，域名，路径等

特点：
基于服务器环境使用
存储数据最大不超过4K
默认关闭浏览器自动删除
可以指定过期时间、二级域名、文件路径

cookie和sessionStorage有哪些区别？
一、存储的时间有效期不同
cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效
sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效
localStorage的有效期是在不进行手动删除的情况下是一直有效的
二、存储的大小不同
cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息
localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)
三、与服务端的通信
cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。
localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信
四、读写操作的便捷程度
storage有设置、读取、删除等方法
cookie需要自己封装
五、对于浏览器的支持
cookie出现的时间较早，目前见到的浏览器都支持
localStorage和sessionStorage出现的时间较晚，对于版本较低的浏览器不支持(比如IE8版本以下的都不支持)

外部文件拖放，在放置时可以接收数据
e.dataTransfer.files

显示图片
创建文件读取器
var fr=new FileReader();
fr.readAsDataURL(file);//读文件,以base64格式读取

字符串转码：
escape:
encodeURI:
encodeURIComponent:

unescape:
decodeURI:
decodeURIComponent:

drag和drop 拖放

拖动目标的事件3个
btn.ondragstart 开始拖动,传递数据
btn.ondrag 拖动中
btn.ondragend 结束拖动

放置目标的事件4个
box.ondragenter 进入放置目标的有效区
box.ondragover 在放置目标的有效区移动
box.ondragleave 离开放置目标的有效区
box.ondrop 放置

enter和leave通常用于设置样式
over用于阻止默认行为
drop放置，接收数据