Web 开发中的矢量绘图处理和应用(5)_H5之家 - 中国HTML5教程资源分享第一站

// 在坐标点 10, 50 位置创建一个 320 × 200 大小的画布 varpaper = Raphael(10, 50, 320, 200); // 在 x = 50, y = 40 位置画一个半径为 10 的圆形 varcircle = paper.circle(50, 40, 10); // 使用红色 (#f00) 来填充这个圆形 circle.attr("fill", "#f00"); // 设置画笔为白色 circle.attr("stroke", "#fff");

图 9. 使用 Raphael 绘制的一些矢量图形

Figure xxx. Requires a heading

对于矢量绘图的几点建议

虽然 Web 下的矢量绘图功能十分强大，但由于很多实际原因这部分技术并没有被广泛应用。在此根我们对矢量绘图的使用经验给出一些使用矢量绘图的建议：

对于一些以实验为目的、非正式商用或者一些特殊需求的应用，大可不必考虑浏览器过多的兼容性等问题，使得问题变得过于复杂。可直接使用 HTML5 的 canvas。

对于严格要求众多浏览器兼容性的应用，可以通过动态判断浏览器的类型在 IE 中使用 VML，在其他浏览器中使用 SVG。但更推荐直接使用 Raphael 开源类库。

尽量控制矢量绘图的使用范围，使得如果矢量绘图技术在本地浏览器不可用时，不影响基本功能的使用。例如：利用矢量绘图绘制报表图形，广告，等等。

小结

随着当今社会对各种产品和服务的用户体验的要求越来越来高，矢量绘图在 Web 页面开发中的重要性与日俱增。本文对当前主流的三种 Web 矢量绘图技术进行了详细的介绍。并以开源项目 Raphael 为例介绍了混合矢量绘图技术。在此基础上对 Web 应用中如何使用矢量绘图技术给出了一些建议。虽然，如本文所述，Web 上的矢量绘图技术暂时还没有哪一种能成为主导，但是随着技术的发展和需求的增强，终将会有一、两种已存在的或新的矢量绘图技术脱颖而出并被广泛接受和使用，把我们的网络生活装扮的更加“丰富多彩”。