《JavaScript高效图形编程(修订版)》——6.4 画布与SVG的对比

  1. 云栖社区>
  2. 博客>
  3. 正文

《JavaScript高效图形编程(修订版)》——6.4 画布与SVG的对比

异步社区 2017-05-02 13:40:00 浏览914
展开阅读全文

本节书摘来自异步社区《JavaScript高效图形编程(修订版)》一书中的第6章,第6.4节,作者:【美】Raffaele Cecco著,更多章节内容可以访问云栖社区“异步社区”公众号查看

6.4 画布与SVG的对比

有些人最初对苹果创建另一个浏览器图形标准持保留意见,他们可能认为SVG已经足够了。从表面上看SVG和画布提供类似的图形能力,但它们有一个根本的区别:SVG是一个高层的、基于XML的标记语言,可以通过创建XML元素属性来定义图像;而画布则提供了可以直接从JavaScript访问的绘图API。

你可以使用任何文本编辑器手动创建SVG XML,或将它从Adobe Illustrator或Inkscape等绘图软件中导出。以下的SVG例子显示了一个蓝色矩形:

screenshot

要通过JavaScript操纵这个矩形,你需要访问a_rectangle元素并适当调整其属性。听起来很熟悉吗?就像HTML中那样,我们通过一个类似DOM的结构去定义视觉效果。试想假如我们需要1000个矩形?没错,我们必须插入1000 矩形元素到XML中。这种方式对需要更多编程的动态图形来说,不是特别有效或直观。

不过,SVG不用JavaScript就能带给你绘制和动画功能,而且有大量设计工具供你编辑SVG图形。由于现在IE9中也提供了基本的支持,当需要矢量图时,SVG是一个不错的解决方案。维基百科等网站就广泛使用SVG作为插图。

网友评论

登录后评论
0/500
评论
异步社区
+ 关注