SVG 与 Canvas：如何选择(5)_H5之家 - 中国HTML5教程资源分享第一站

if (animationsInProgress) { ctx.save(); ctx.lineWidth = 2.0; ctx.beginPath(); ctx.moveTo(89, 322); ctx.lineTo(101, 295); . . . ctx.stroke(); ctx.restore(); ctx.moveTo(tVp.x, tVp.y); }

对于 SVG Dice，自定义的更高级别的动画管理器使用组转换通过 DOM 在屏幕上重新定位现有图形。

JavaScript

if (animationsInProgress) { this.rotation += (this.circleBody.m_linearVelocity.x/20); var transFormString = "translate(" + Math.round(this.circleBody.m_position.x) + "," + Math.round(this.circleBody.m_position.y) + ") scale (" + this.scale.toString() + ") rotate(" + Math.round(this.rotation).toString() + "," + Math.round(this.xTrans).toString() + "," + Math.round(this.yTrans).toString() + ")"; this.die2.setAttribute("transform", transFormString); }

一种技术要重新绘制和重新定位形状，而另一种技术只需重新定位，但需要在内存中维护形状，这会带来成本。此成本对于大多数休闲游戏来说都是相当低的，但预期是使用较低级别的 API 实现即时模式图形的游戏更加让人熟悉。

高级方案

可能大部分功能强大的方案都会涉及组合整个图形、样式和文档技术。

用户界面设计

几年前可能就在争论 SVG 是否是适合用于用户界面设计的技术。这些要求与 SVG 一致。事实上，Linux 操作系统的至少一个前端完全建立在 SVG 之上。滑块、复选框、圆形按钮等控件以及其他标准固有控件集中的非框控件都很适合在矢量图形中使用。但是，随着 CSS 的最近和未来开发（包括圆角、渐变、过滤器和打印机事件），可以通过标准的框模型 HTML 文档中心构造来开发大多数这些控件。其他控件（尤其是使用最新 CSS Grid 和 Flexbox 模型的控件）都更好地面向 HTML 元素，至少作为容器。

此处提供了一个丰富的数据驱动图表的示例。尽管该示例的输出没有架构好，但显示的最终结果正确。图形和图表控件是众所周知的难开发，但第三方以及 Microsoft 已经成功了。通过在客户端或服务器端提供最新的数据绑定抽象，客户端的 Web 呈现主要保持静态或者需要插件，这样可减轻开发人员的负担。下面我们利用了 SVG 的丰富性来提供增强的用户体验。无论代码如何（将传递给客户端，又或许在将来更多的声明性交互中使用），图表都用两个关键组件来呈现。工具和数据。图形工具或背景是基本的静态 SVG：

HTML

milliseconds

然后每个单独的数据点要么传递到客户端并进行操作，要么在服务器上生成：

HTML

{Page}.svg6.1%

结论

通过最新浏览器中提供的现有矢量图形技术的分析功能，可以交互方式使用标准 Web 技术来满足现有的和新的方案。从今以后，我们将拥有巨大的机会可以让声明性动画支持广告版位。通过使用方案驱动的功能开发，我们可以在竞争中处于领先地位，并在 Web 应用程序和网页中提供基于标准的图形丰富的体验。

（本文来源微软MSDN）

SVG 与 Canvas：如何选择