H5拖拽操作和canvas画图

拖放操作

在HTML4.01中超链接和图片默认可以被拖动

第一步：设置可拖放属性draggable为true

第二部：根据需求选择拖放的事件进行处理（与click、change等事件用法相同）

新添事件

dragstart:开始拖放

drag:拖放中

dragenter:拖放中进入本元素

dragover:拖放中再本元素移动

dragleave:拖放中离开本元素

drop:放开移动元素

dragend:拖放结束

注意：如果你想实现拖放过程，无论是否需要都要取消dragover事件的默认行为

document.ondragover =function(e){e.preventDefault();}

事件数据处理对象:dataTransfer

dataTransfer对象有两个主要的方法：getData()方法和setData()方法。从这两个方法的英文字面意思上就能大概猜出来其用途。getData()方法可以取得由setData()方法保存的值。setData()方法的第一个参数，也是getData()方法唯一的一个参数，是用来保存数据类型的字符串，取值是”text”或”URL”。

　　 IE只定义了”text”或”URL”两种有效的数据类型，而HTML5则对此加以扩展，允许指定各种MIME类型。考虑到向后兼容，HTML5也支持”text”或”URL”，但这两种类型会被映射为”text/plain”或”text/url-list”。

setData(mime_type,data);存储数据

getdata(mime_type);取出数据

属性：

effectAllowed 控制特效

effectAllowed 用来指定当元素被拖放式所允许的视觉效果，其值如下：

　　 uninitialized：没有给被拖动元素设置任何放置行为。

　　 none：被拖动的元素不能有任何行为。

　　 copy：只允许值为”copy”的dropEffect。

　　 link：只允许值为”link”的dropEffect。

　　 move：只允许值为”move”的dropEffect。

　　 copyLink：允许值为”copy”和”link”的dropEffect。

　　 copyMove：允许值为”copy”和”move”的dropEffect。

　　 linkMove：允许值为”link”和”move”的dropEffect。

all：允许任意dropEffect。

dropEffect 控制特效

dropEffect 表示拖放操作的视觉效果这个属性的四个值如下：

　　 none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。

　　 move：应该把拖动的元素移动到放置目标。

　　 copy：应该把拖动的元素复制到放置目标。

　　 link：放置目标会打开拖动的元素(但拖动的元素必须是个链接，有URL地址)。

canvas元素（画图）

canvas元素

属性 width height

兼容性元素内容

canvas配套API

获取canvas元素

var Mycanvas = document.getElementById('Mycanvas');

获取canvas元素操作上下文getContext对象

var c = Mycanvas.getContext("2d");

用实例学习canvas的基本使用

开始绘制：beginPath();

结束绘制：closePath();//闭合路径

清除画布：clearRect(x,y,width,height);

1.绘制线段

涉及属性：