计算机论文辨析Canvas绘图机制的优劣

　　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 user's 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的游戏开发提供了丰富的创意空间，也使交互性的设计成为了可能。下面就以用户输入来绘图的记事本为例说明Canvas绘图的过程。

　　Canvas API是通过在网页上绘制一个矩形画布来实现绘图的，因此首先需要在网页中添加Canvas的矩形区域，设置其位于浏览器的最上层，添加CSS样式规则为 “z-index：3”，使其能捕获用户的鼠标动作，并预先定义好它的长宽，否则如果在CSS或JS中二次定义的话，会使图形发生按比例缩小或放大的情况 [3]。其次，在javascript标签中使用getContext(“2d”)方法来获取二维平面图的上下文环境，就类似于画家手中拿的画笔，使用这个对象，就可以使用Canvas程序中的代码接口实现各种图形的绘制。Canvas标签的代码如下：

　　在记事本中允许用户自己定义画笔的颜色和粗细，采用HTML5中type="range"的input标签可以创建允许用户设置笔触粗细的滑动条，使用type="color"的input输入框创建控制笔触颜色的选择器。这里将灰色文字作为用户描画的蓝本，置于Canvas对象的下一层，即“z- index：2”，将田字格的背景置于最底层，即“z-index：1”，建立修改画笔属性的表单，实现的界面如图1所示。

　　通过给Canvas对象增加三个事件监听器，获得用户在田字格中使用鼠标写字的动作，根据用户鼠标的位置来判断用户写字的笔划。其代码总结如表1所示。

　　首先，用户按下鼠标表示开始绘图，这是一个瞬间的事件，为MouseDown的事件添加名为“drawStart”函数，在该函数中使用全局变量记录下用户点击鼠标的坐标位置作为绘图的起点;用户在移动鼠标(MouseMove)时，添加名为“drawLine”的事件，在该事件中获取用户设定的笔触大小和颜色以进行绘图，此事件会随着用户鼠标位置的移动不停地被执行;最后，用户松开鼠标时(MouseUp)为Canvas对象添加名为 “drawEnd”的事件，通知浏览器停止绘图。其中移动鼠标时绘图的核心代码如下：

　　drawWord=function(x1， y1， x2， y2) {

　　var c=document.getElementById("myWrite");

　　if (c && c.getContext("2d")) {

　　var cxt=c.getContext("2d");

　　//根据鼠标的位置

　　cxt.beginPath();

　　cxt.moveTo(x1， y1);

　　cxt.lineTo(x2， y2);

　　cxt.closePath();

　　//开始画线，根据用户的选择来设置线条属性

　　cxt.lineWidth=$("#lineWidth").val();

　　cxt.strokeStyle=$("#lineColor").val();

　　cxt.stroke();

　　}

　　};

　　同时，用户点击其他文字的时候采用Canvas API的clearRect()的方法清除用户先前的绘图痕迹，重新开始一副新的绘图，最终实现效果如图2所示。

　　通过以上案例可以看出，使用Canvas绘图代码较为简单，有网页设计基础的人员都能够掌握，它可以模拟逼真的鼠标写字的效果，通过捕获鼠标的坐标可以准确定位画笔的位置，并提供个性化的画笔属性的选择。但是也存在一定的缺陷，如果用户移动鼠标过快，则呈现出的线条不够流畅，线性只是单调的矩形，不能根据用户按住鼠标的力度调整线条粗细等。但是上述情况在大多浏览器绘图机制中都存在，因此有待浏览器绘图技术的进一步发展来改善。需要注意的是，Canvas绘图在不同的浏览器中的支持情况不同，本案例在下述浏览器中的测试情况如表2所示。

　　说明：“×”表示不支持，“○”表示能够正确的呈现

　　3 结束语

　　Canvas绘图是HTML5这个新的标准中推出的绘图程序接口，它可以不借助于任何插件，根据用户输入进行绘图，实现良好的交互效果。它基于客户端 javascript脚本来实现，结合HTML5的其他技术可以实现兼容不同移动平台的移动游戏开发、数据图表展示以及在线绘图等功能。虽然相比于 SVG，它还存在一定的不足，但是随着浏览器实现技术的提升以及人们对Web应用的需求变得越来越高，它一定会展现出良好的应用前景。

　　参考文献：

　　[1] 万本庭，陈明.基于SVG的矢量图形库管理模型[J].计算机工程，

　　2006.2：65-67

　　[2] Peter Lubbers[荷]，Brian Albers[美]，Frank Salim[美]著，柳靖，李杰，刘

　　淼译.HTML5程序设计(第二版)[M].人民邮电出版社，2012.

　　[3] Brian P.Hogan[美]著，李杰，刘晓娜，朱嵬译.HTML5和CSS3实例教