h5-拖放
设置元素可拖动属性
draggable="true"
拖放元素事件：事件对象为被拖拽元素（拖动的元素）
dragstart:拖拽前触发
drag：拖拽前、拖拽结束之间，连续触发
dragend:拖拽结束触发
目标元素事件：目标元素为存放拖动对象的元素
dragenter:进入目标元素触发，相当于mouseover
dragover:进入目标，离开目标之间，连续触发
dragleave:离开目标元素触发，相当于mouseout
drop:在目标元素上释放鼠标触发（也就是拖放完成的时候 ）
解决火狐下的问题：必须设置dataTransfer对象的setData方法才可以拖拽除图片外的其他标签
dataTransfer对象：
setData():设置数据key和value（必须是字符串）
getData():获取数据，根据key值，获取对应的value
effectAllowed:设置光标样式（none,copy,copyLink,copyMove,link,linkMove all和uninitialized）
setDragImage:三个参数，指定的元素，坐标X，坐标Y，拖动元素时鼠标在元素的位置
files:获取外部拖拽的文件，返回一个filesList列表
fileList下有个type属性，返回文件的类型
fileReader(读取文件信息)：
readAsDataURL:参数为要读取的文件对象，将文件读取为DataUrl
onload: 当读取文件成功完成的时候触发此事件
this.result来获取读取的文件数据，如果是图片，将返回base64格式的图片数据
canvas 画布
<canvas>不支持canvas浏览器</canvas>内容写在canvas标签中 默认：宽300 高150
绘制环境：getContext('2d'):目前只支持2d的场景
<canvas id="box" width="400" height="400"><!--canvas 画布-->
<span>浏览器不支持的时候显示</span>
</canvas>
<!--默认的宽:300px 高150px-->
<script type="text/javascript">
var oBox=document.getElementById("box");
//getContext("2d"); 是html5当中内置的对象,拥有折线 、圆形等等绘制图像的方法
var oCanvas=oBox.getContext("2d")
console.log(oCanvas)
</script>
绘制方块
fillRect（L,T,W,H）默认颜色为黑色 , 实心方块
strokeRect（L,T,W,H），空心方块
设置绘图
ctx.fillStyle="#FF0000"; 填充颜色 （默认为黑）
lineWidth:线宽度，是一个数值
strokeStyle;边线颜色
边界绘制
lineJoin 边界连接点样式 （边框角）
mlter(默认)、round(圆角) 、bevel（斜角）
lineCap 端点样式（想要看端点需要先）
butt 默认 、round(圆角) 、square(高度多出为宽一半的值)
绘制路径
beginPath(); 开始绘制路径
closePath(); 结束绘制路径
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
stroke:画线，默认黑色
fill 填充，默认黑色
rect:矩形区域
clearRect: 删除一个画布的矩形区域
save:保存路径
restore:恢复路径
绘制圆
arc(x,y,半径，起始弧度，结束弧度，旋转方向)
x,y起始位置
弧度与角度的关系：弧度=角度*Math.PI/180;
旋转方向：顺时针（默认：false）、逆时针（true）
文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
fillText(text,x,y) - 在 canvas 上绘制实心的文本
font - 定义字体
textAlign: 默认是 start跟 left一样的效果，end right center
textBaseline 文字上下的位置的方式默认 alphabetic
measureText(str).width; 只有宽度，没有高度
阴影：
shadowOffectX、shadowOffectY X轴偏移Y轴偏移
shadowBlur 高斯模糊值
shadowColor 阴影颜色