以写字本为例辨析Canvas绘图机制的优劣.docVIP

以写字本为例辨析Canvas绘图机制的优劣 摘 要： 通过比较SVG和Canvas两种绘图机制，辨析了使用Canvas在网页中绘图方案的优缺点。使用一个在线写字本案例，论述了Canvas捕获用户的鼠标事件根据用户输入来绘图的过程。最后总结了Canvas绘图的特性以及应用前景。 关键词： Canvas； 绘图； 写字本； 事件 中图分类号：P315.69 文献标志码：A 文章编号：1006-8228（2014）08-17-02 Discussion about Canvas drawing scheme with example of notebook Li Anqin （Network Technology Department of South-China Institute of Software Engineering， Guangzhou， Guangdong 510990， China） Abstract： By comparing two different drawing mechanisms between the SVG and the Canvas， the merits and drawbacks of Canvas scheme drawing pictures on web page are analyzed. With the example of notebook on Windows， the process of drawing picture through catching the users input and mouse events is discussed. The features and application prospect of Canvas drawing scheme are summarized. Key words： Canvas； drawing； notebook； event 0 引言 Canvas API是HTML5规范中在浏览器中绘图的程序接口，它为开发人员提供了一套二维绘图系统，在Canvas画布上融合javascript可以动态地生成和展示各种图像和动画，从而进行各种手机游戏开发、图表制作以及动态横幅广告展示等。在此之前，开发人员若要在浏览器中绘图，只能使用Adobe的Flash和SVG（Scalable Vector Graphics，可伸缩矢量图形），然而使用Flash的解决方案需要借助Flash Player插件来实现，而此插件不停地更新版本，这也会对用户造成一定的困扰。本文分析了完全靠浏览器实现的Canvas与SVG这两种绘图方案的区别，以一个在线写字本为例，阐述采用Canvas API在浏览器中根据用户输入进行绘图的方法的优劣。 1 SVG和Canvas绘图技术比较 SVG全称是Scalable Vector Graphics，即可伸缩矢量图形，是使用XML来描述二维图形和绘图程序的语言[1]。同Canvas API一样，SVG是一套在客户端生成绘图的解决方案，相比在服务器端生成的绘图技术来说，在客户端生成的绘图技术充分利用客户端浏览器这个强大的工具，不需要预先在服务器上读取和分析数据，可以有效地减轻服务器的压力，降低带宽的损耗，从而提高绘图的效率。Canvas和SVG都是基于javascript脚本的解决方案，两者的区别在于： ⑴ Canvas绘制的图像是由一组二维像素网格来表示的栅格图形，而SVG绘制的矢量图形是基于图形本身的几何特征来表示的[2]，因此，除非需要对Canvas区域重新渲染，否则使用Canvas绘制的图像在放大或缩小时会失真； ⑵ 从搜索引擎角度来看，SVG绘图中的文本能被搜索引擎获取，而Canvas中的文本实际上是图像的一部分，不能被搜索引擎识别； ⑶ SVG将画布中的元素作为HTML的一部分，同DOM API构成了一个矢量的绘图API，而Canvas不属于网页HTML的DOM结构或任何的命名空间，也不能直接检测鼠标单击了图像的哪个点，因此需要借助鼠标坐标在图像中的定位来实现。 综上所述，相比起SVG绘图来说，Canvas仍具有一些明显的不足，但是HTML5规范中使用的是Canvas绘图机制，说明其仍具有一定的优势，如：Canvas没有将画布中的的元素作为对象进行存储，不需要在浏览器中大量地添加各种DIV元素，因此HTML代码较简洁，执行效率较好。另外，对于开发人员来说，Canvas入门较简单，而学习SVG需要有比较扎实的浏览器编程基础。 2 Canvas绘图的应用 Canvas绘图的应用非常广泛，既可以绘制静态的展示性的统计图表，也可以根据用户输入进行交互式的绘图，包括各种矩形、弧形、不规则图形等，为HTML5的游戏