h5-拖放 , canvas
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 阴影颜色