javascript Canvas 与 SVG 的简单游戏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12283168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Canvas vs SVG for simple games
提问by user1551120
If I wanted to build a simple game (snake, checkers, pacman or whatever) what would be the better approach - SVG or Canvas ?
如果我想构建一个简单的游戏（蛇、跳棋、吃豆子或其他）什么是更好的方法 - SVG 或 Canvas ？
Things I'm interested in:
我感兴趣的事情：
Ease of implementation (learning curve of Canvas vs SVG) . For example if SVG has significantly less tutorials and community support that's crucial to me.
Performance (not critical to me but still important)
易于实施（Canvas 与 SVG 的学习曲线）。例如，如果 SVG 的教程和社区支持显着减少，那对我来说至关重要。
性能（对我来说并不重要，但仍然很重要）
And also , in the gaming field , are there specific games that SVG is more suited for than Canvas (or vice versa?)
而且，在游戏领域，有没有 SVG 比 Canvas 更适合的特定游戏（反之亦然？）
回答by methodofaction
Games that require a lot of mouse interaction and not much continuous animation (such as checkers or chess, or any board game for that matter) are better suited for SVG because you work with dom elements. Consider a simple button hover, in SVG you can add event listeners or even just place g.button:hover path {fill: blue;}in your CSS and it will work. Canvas, on the other hand, requires keeping track of the hit area and drawing everything in Javascript.
需要大量鼠标交互且不需要太多连续动画的游戏（例如跳棋或国际象棋，或任何与此相关的棋盘游戏）更适合 SVG，因为您使用 dom 元素。考虑一个简单的按钮悬停，在 SVG 中，您可以添加事件侦听器，甚至只是放置g.button:hover path {fill: blue;}在您的 CSS 中，它就会起作用。另一方面，Canvas 需要跟踪命中区域并在 Javascript 中绘制所有内容。
Snake and Pacman would be better suited for canvas, you control everything with your keyboard and painting to canvas is less expensive than moving elements around in SVG. There are excellent gaming libraries for canvas, impact.jsis one of them.
Snake 和 Pacman 更适合画布，你用键盘控制一切，画到画布比在 SVG 中移动元素便宜。画布有很多优秀的游戏库，impact.js就是其中之一。
Addressing your points:
解决您的问题：
Ease of use:if you are familiar with pure javascript DOM manipulation SVG is a breeze. If you are blank slate I'd say canvas is easier to grasp, as you just paint on it.
易用性：如果您熟悉纯 javascript DOM 操作，SVG 是轻而易举的。如果你是白板，我会说画布更容易掌握，因为你只是在上面画画。
Community support:for gaming canvas wins hands down. There is a strong SVG community but not in the gaming area.
社区支持：为游戏画布赢得了胜利。有一个强大的 SVG 社区，但不是在游戏领域。
Performance:Mixed. Both canvas and SVG can be slow if you don't pull off a couple of tricks. For example, moving a single square from left to right can be jerky in canvas if you repaint the entire screen on each frame. If you just repaint the area that changed then it's smooth. SVG would handle this case without a hitch. But on the other hand, if you want to animate thousands of rectangles at once, canvas handles it smoothly and SVG bogs down if you don't wrap the rects in a group and move the group around.
表现：混合。如果您不使用一些技巧，canvas 和 SVG 都会变慢。例如，如果您在每一帧上重新绘制整个屏幕，则在画布中从左到右移动单个方块可能会很不稳定。如果你只是重新绘制改变的区域，那么它是平滑的。SVG 可以顺利处理这种情况。但另一方面，如果您想同时为数千个矩形设置动画，canvas 可以顺利处理它，如果您不将矩形包裹在一个组中并移动该组，则 SVG 会陷入困境。
All in all, if you want to explore gaming in javascript perhaps Canvas is a better option. I've done three games in SVG, the latest one being http://color.method.ac, but I've dabbled in canvas and I think it's better suited for gaming.
总而言之，如果您想在 javascript 中探索游戏，也许 Canvas 是更好的选择。我已经用 SVG 完成了三场比赛，最近一场是http://color.method.ac，但我已经涉足画布，我认为它更适合游戏。
