Canvas和SVG在简单游戏中的应用对比

Question

Canvas和SVG在简单游戏中的应用对比

javascripthtmlsvghtml5-canvas

33

如果我想制作一个简单的游戏（贪吃蛇，跳棋，吃豆人或其他），使用SVG还是Canvas比较好？

我关心的事情包括：

1. 实现的难易程度（Canvas相对于SVG的学习曲线）。例如，如果SVG教程和社区支持显著少于Canvas，这对我很重要。

2. 性能（对我来说不是至关重要但仍然很重要）。

在游戏领域中，是否有特定的游戏适合使用SVG而不是Canvas（反之亦然）？

- user1551120

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- methodofaction · Accepted Answer

需要翻译的内容：

需要大量鼠标交互而不需要太多连续动画（例如跳棋或国际象棋，或任何棋盘游戏）的游戏更适合使用SVG，因为你可以使用DOM元素。考虑一个简单的按钮悬停，在SVG中，你可以添加事件监听器，甚至只需在CSS中放置g.button:hover path {fill: blue;}即可。Canvas则需要跟踪命中区域并在Javascript中绘制全部内容。

贪吃蛇和吃豆人更适合使用canvas，你可以用键盘控制一切，并且在canvas上绘制比在SVG中移动元素要便宜得多。有一些出色的用于canvas的游戏库，impact.js就是其中之一。

针对您的观点：

易用性：如果您熟悉纯JavaScript DOM操作，则SVG非常容易上手。如果您是白板，则我认为canvas更容易理解，因为您只需在其上绘制即可。

社区支持：在游戏方面，canvas胜出。有很强的SVG社区，但不在游戏领域。

性能：混合。如果你不采用一些技巧，canvas和SVG都可能变得很慢。例如，如果在每帧重新绘制整个屏幕，则在canvas中将单个正方形从左到右移动可能会很卡顿。如果只重新绘制已更改的区域，则会很平滑。SVG可以毫不费力地处理这种情况。但是，另一方面，如果您想同时动画化数千个矩形，则canvas可以平稳处理，而如果您不将矩形包装在组中并移动该组，则SVG会变得缓慢。

总之，如果您想在JavaScript中探索游戏开发，Canvas可能是更好的选择。我已经使用SVG做了三个游戏，最新的一个是http://color.method.ac，但我也尝试过canvas，我认为它更适合游戏开发。