一、拖放事件
1.1 设置拖拽
给标签设置一个draggable设置为true, 标签就可以拖拽了
1.2 拖拽事件
1.2.1拖拽元素事件 (事件对象为被拖拽元素)
ondragstart 拖拽前触发
ondragend 拖拽结束触发
ondrag 拖拽前、拖拽结束之间，连续触发
看实例：
<p draggable="true"><img src="images/225.jpg" alt="" style="width:100px;height: 100px;" ></p>
<script>
var box = document.querySelector("p");
box.ondragstart = function(){
console.log("我被拖拽了！");
}
box.ondrag = function(){
console.log("我在被拖拽的过程中");
}
box.ondragend = function(){
console.log("拖拽结束了！");
}
</script>
1.2.2 目标元素事件 (俗解：意思就是拖拽的元素放在哪里)
ondragenter 进入目标元素触发，相当于mouserover
ondragover 进入目标，离开目标之间，连续触发
ondragleave 离开目标元素触发，相当于mouseout
ondrop 在目标元素上释放鼠标触发(要想触发drop事件，就必须在ondragover的时间中阻止默认事件)
1.2.3 even下的 dataTransfer 对象
setData() : 设置数据 key 和 value (必须是字符串)
getData() : 获取数据，根据 key 值，获取对应的value
effectAllowed : 拖住到相应区域时显示的光标样式(none、copy、copyLink、copyMove、link、linkMove、move、all、和uninitialized)
setDragImage() (当这个传递的节点隐藏的时候只支持Firefox)
他是拖住时显示的图形和样式 ， 有三个参数：指定的元素(指点的阴影样式)，坐标X 坐标Y(x、y是拖拽时鼠标的位置)
小案例：
#box{margin-left:150px;}
#box1 img{display: block;width:100px;height:100px;float:left;margin-left:20px;} <p id="box"><img src="images/回收站.png" alt=""></p>
<p id="box1">
<img src="images/唯美1.jpg">
<img src="images/唯美2.jpg">
<img src="images/唯美3.jpg">
<img src="images/唯美4.jpg">
</p>
<script type="text/javascript">
//获取 垃圾箱对象
var box = document.querySelector("#box");
//获取图片列表对象
var imgList = document.querySelectorAll("img");
//获取图片列表的父元素
var box1 = document.querySelector("#box1");
//遍历图片，并且增加拖拽开始事件
imgList.forEach(function(item,index){
item.ondragstart = function(event){
event.dataTransfer.setData("name",index);
}
});
//阻止冒泡
box.ondragover = function(event){
event.preventDefault();
};
box.ondrop = function(event){
// 获取拖拽元素的编号
var index = event.dataTransfer.getData("name");
box1.removeChild(imgList[index]);
};
</script>实例效果图:
1.3 外部拖拽文件
files (获取外部拖拽的文件，返回一个filesList列表)
length (event.dataTransfer.files.length)
Type(event.dataTransfer.files[0].type) 比如：图片的是(image/jpeg)
FileReader 对象(读取文件信息)
方法一：readAsDataURL():参数为要读取的文件对象，将文件读取为DataUrl
方法二：Onload()事件函数:当函数文件读取成功完成的时候触发此事件。（this.result用来获取读取到的文件数据，如果是图片，将返回base64格式的图片数据）
小案例：拖拽文件上传：
#box{width:200px;height:200px;line-height:200px;text-align:center;border:5px dashed #eeee;background:pink;} <p id="box">请将图片拖到此区域</p>
<p id="imgs"></p>
<script>
var box = document.querySelector("#box");
var imgList = document.querySelector("#imgs");
box.ondragover = function(event){
event.preventDefault();
};
box.ondrop = function(event){
event.preventDefault();
// 获取外部拖拽的文件
var fileList = event.dataTransfer.files;
for( var i = 0;i < fileList.length; i++){
if(fileList[i].type.indexOf("image")>-1){
var fd = new FileReader();
//读取文件对象
fd.readAsDataURL(fileList[i]);
fd.onload = function(){
//创建一个图片节点
var img = document.createElement("img");
img.src = this.result;
img.width = "200";
img.height = "200";
imgs.appendChild(img);
}
}
}
};
</script>
二、canvas(画布)
2.1 什么是canvas？
canvas是HTML5提供的一种新标签
canvas是一个矩形区域的画布，可以用JavaScript在上面绘画
canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
HTML5之前的web页面只能用一些固定样式的标签：比如p、p、h1等，但有了canvas Web页面可以可以丰富多彩
2.2 canvas 的应用领域
游戏。canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas游戏在流畅度和跨平台方面更牛
可视化数据.数据图表，比如:百度的echart
banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过
2.3 canvas 绘图基础
2.3.1 canvas 标签的属性和语法
标签名canvas，需要进行闭合。就是一普通的html标签
可以设置width和height属性，但是属性值单位必须是px，否则忽略
width和hegiht：默认300*150像素
注意：1.不要用CSS控制它的宽和高,会走出图片拉伸
2.重新设置canvas标签的宽高属性会让画布擦除所有的内容
3.可以给canvas画布设置背景色
2.4 canvas绘图上下文 (context)
上下文：上知天文，下知地理。是所有的绘制操作api的入口或者集合。
Canvas自身无法绘制任何内容。Canvas的绘图是使用JavaScript操作的
Context对象就是JavaScript操作Canvas的接口
使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文
<canvas></canvas>
<script>
var cas = document.querySelector("canvas");
var ctx = cas.getContext("2d&q