一、网页前端绘图的方式
1、Flash
Flash在前端绘图需要安装插件，而且使 Flash中的元素与网页中其他元素进行交互是要消耗大量时间和资源的，另外在编程上也相当不方便。
2012年8月15日，Adobe公司宣布停止为移动设备开发Flash player，Flash在退出移动终端过之前，微软官方博客发布消息：Windows 8 的 Metro 版 IE 10 浏览器将不再支持Flash插件。
2、VML
VML的全称是Vector Markup Language（矢量标记语言）。VML是一种XML语言，用于绘制矢量图形。VML规格尽管被W3C所拒绝，但是微软公司开发的IE浏览器，从5.0版本之后都实现了对VML的支持，也只有IE对VML支持。VML支持动态脚本的调用，即可以在VML中嵌套JavaScript。
3、SVG
可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。
SVG有DOM接口，每个图元都会对应DOM对象，这些对象都是可以单独操作的，而且还能绑定onclick这类事件。
SVG图形是矢量的，无需任何图像处理工具，通过XML文本生成，正是因为通过文本、指令生成的图像，才是矢量的。
4、canvas
canvas是Html5标准中的一个元素，javascript为其提供了一些绘图API，通过canvas生成的图像是栅格形式的，即像素图像，与VML和SVG生成的矢量图像不同。
canvas是一个HTML中的元素，所以它能够与浏览器渲染引擎紧密结合、节约资源，简化了图形和网页中其他元素的交互过程。 而且可以像操作普通 HTML 元素一样操作canvas。开发人员可以将所有的代码整齐的写在一个文件里，降低了维护与更新的难度。
二、绘图方式的比较
从上面的介绍当中，我们可以看出flash和VML的局限性，Flash需要插件的安装，而且退出手机终端插件的开发，苹果和微软都开始废弃Flash了。而对于VML，在五大浏览器中只有IE支持，所以若是在前端绘图，考虑到推广和各个浏览器的兼容性，也不易采用VML。那么余下的就只有SVG和Canvas了，确实是这两种方式目前都得到了浏览器广泛的支持，但是在图像生成、渲染的原理和性能以及用户交互方面有很大的不同。
canvas生成图像的原理是基于像素，而SVg则是基于形状，SVG通过XML语言描述图形的形状，无论放大或缩小都保持文本描述的形状，所以是矢量的，而canvas基于像素的，当把图像放大的话就会变模糊。
canvas就是一个HTML元素，其中可以绘制很多图形，都是在这一个canvas中，而SVG所绘制的各个图形都是单独的一个元素，是DOM的一部分。
canvas无法对已绘制的图像进行操作、修改，也就是说获取不到canvas中的某一个图像，但是SVG可以，因为在SVG所渲染的图像中，单个的图像都是一个DOM元素，我们就可以通过CSS和js脚本进行修改和操作。不过，在canvas中我们可以记录其中各个对象的位置，想要的修改某一对象，我们只能是把原来的对象擦除，重新绘制。
canvas中的某一图像“对象”无法像DOM中元素一样来添加事件，只能是通过判断当前事件的坐标是否落在该对象中来进行模拟事件模型；SVG就可以跟为DOM元素添加事件一样，为其中的每一个图像添加事件。