HTML5绘画与拖放事件

HTML5绘画

在html5中出现了许多新的特性，绘画功能就是其中之一。由于html5新增的这些新特性，所以也在逐渐取代Flash，毕竟Flash比较占用内存，也经常性奔溃。

html5不仅能制作2d的绘画还能做3d的绘画，但是要注意的是这两者使用的函数不一样但都基于canvas。在网络上我们可以搜索到一些使用html5制作的2D或3D的效果图，例如：

除了以上这些图片效果外，html5的3D绘画还可以制作自由拖动的统计表格或一些图形。

如何使用html5进行绘画：

由于我们是做后端开发的，所以在这里只简单介绍一下html5中的2D绘画，绘画的制作都是基于canvas标签的，所以先介绍一下canvas标签：

canvas是一个画布，这个画布通常是一个矩形区域，我们可以控制这画布中的每一个像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 标签：

代码示例：

运行结果：

虽然绘画基于canvas，但是canvas本身并没有绘制能力，它仅仅是图形的容器，必须使用js脚本来完成实际的绘图任务。

通过 JavaScript 来绘制：

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，代码示例：

在以上代码中，我们需要通过getContext函数来创建Context绘画对象，Context对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

getContext函数可以传递以下几个参数，webgl是创建3D的绘画对象，而2d则是创建2d的绘画对象，至于experimental-webgl则是实验性质的3D绘画对象，在进行3D绘制的实验阶段可以使用此参数：

接下来使用fillStyle属性和fillRect函数在画布上绘制一个红色的矩形，fillStyle是用于设置颜色的，fillRect则定义了形状、位置和尺寸，代码示例：

运行结果：

理解坐标：

上面的 fillRect 方法拥有参数 (10,10,100,100)。

意思是：在画布上绘制 100x100 的矩形，从左上角开始 (10,10)。

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

绘制线条：

通过指定从何处开始，在何处结束，来绘制一条线：

代码示例：

运行结果：

绘制圆形：

通过规定尺寸、颜色和位置，来绘制一个圆：

代码示例：

运行结果：

绘制渐变颜色：

使用指定的颜色来绘制渐变背景：

代码示例：

运行结果：

图像：

把图像放置到画布上：

代码示例：

运行结果：

使用随机数和setTimeOut实现慢慢添加小方块：

运行结果：

利用以上所介绍的知识点制作一个2D坦克大战的地图：

代码示例：

运行结果：

地图可以自己在二维数组上绘制，1表示显示墙的图片，2表示显示钢板的图片，3则是显示草地的图片。

拖放事件

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够实现拖放。

设置元素为可拖动：

为了使元素可拖动，需要把元素中的 draggable 属性设置为 true ，img元素是默认可拖动的，例如我把div设置为可拖动：

运行结果，可以看到能够将div拖动：

ondragstart 事件：

当元素被拖动时就会触发ondragstart 事件，然后通过事件源可以进行一些设置，或者打印消息。

代码示例：

运行结果：

ondragover事件：

ondragover 事件会在被别的元素触碰到时触发，通过这个事件的事件源对象，可以设置在何处放置被拖动的元素。

默认地，无法将元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法。

在这个事件触发时也可以打印一些消息，代码示例：

运行结果：

ondrop事件：

当放置元素时，就会触发 drop 事件。

结合以上几个知识点，可以实现将img元素，来回拖放到不同的div元素中，代码示例：

运行结果：