HTML5绘画与拖放事件

HTML5绘画

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

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

3992

3993

3994

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

如何使用html5进行绘画：

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

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

创建 Canvas 标签：

代码示例：

3995

运行结果：

3996

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

通过 JavaScript 来绘制：

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

3997

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

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

3998

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

3999

运行结果：

4000

理解坐标：

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

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

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

4001

绘制线条：

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

代码示例：

4003

运行结果：

4004

绘制圆形：

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

代码示例：

4005

运行结果：

4006

绘制渐变颜色：

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

代码示例：

4007

运行结果：

4008

图像：

把图像放置到画布上：

代码示例：

4009

运行结果：

4010

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

4011

运行结果：

4012

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

代码示例：

4013

4014

4015

运行结果：

4016

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

拖放事件

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

设置元素为可拖动：

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

4017

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

4018

ondragstart 事件：

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

代码示例：

4019

运行结果：

4020

ondragover事件：

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

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

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

4021

运行结果：

4022

ondrop事件：

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

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

4024

运行结果：

4025

4026

4027