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元素中，代码示例：
运行结果：
