问题描述
如果我想构建一个简单的游戏(蛇、西洋跳棋、吃豆人或其他)，什么是更好的方法 - SVG 或 Canvas?
If I wanted to build a simple game (snake, checkers, pacman or whatever) what would be the better approach - SVG or Canvas ?
我感兴趣的事情:
易于实施(Canvas 与 SVG 的学习曲线).例如，如果 SVG 的教程和社区支持对我来说至关重要.
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 的特定游戏(反之亦然?)
And also , in the gaming field , are there specific games that SVG is more suited for than Canvas (or vice versa?)
推荐答案
需要大量鼠标交互且不需要太多连续动画的游戏(例如跳棋或国际象棋，或任何与此相关的棋盘游戏)更适合 SVG因为你使用 dom 元素.考虑一个简单的按钮悬停，在 SVG 中，您可以添加事件侦听器，甚至只需在 CSS 中放置 g.button:hover path {fill: blue;} 即可.另一方面，Canvas 需要跟踪点击区域并用 Javascript 绘制所有内容.
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.
Snake 和 Pacman 更适合画布，您可以使用键盘控制一切，并且画到画布上比在 SVG 中移动元素更便宜.有很多优秀的画布游戏库，impact.js 就是其中之一.
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.js is one of them.
解决你的观点:
易用性:如果您熟悉纯 JavaScript DOM 操作，SVG 是轻而易举的事.如果你是白板，我会说画布更容易掌握，因为你只是在上面画画.
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.
社区支持:游戏画布胜出.有一个强大的 SVG 社区，但不是在游戏领域.
Community support: for gaming canvas wins hands down. There is a strong SVG community but not in the gaming area.
性能:好坏参半.如果您不采取一些技巧，canvas 和 SVG 都可能会很慢.例如，如果您在每一帧上重新绘制整个屏幕，则在画布中从左向右移动一个正方形可能会很不稳定.如果您只是重新绘制更改的区域，那么它是平滑的.SVG 可以毫不费力地处理这种情况.但另一方面，如果您想一次为数千个矩形设置动画，canvas 可以流畅地处理它，如果您不将矩形包装在一个组中并移动该组，那么 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.
总而言之，如果您想在 javascript 中探索游戏，也许 Canvas 是一个更好的选择.我用 SVG 做了三款游戏，最近一款是 http://color.method.ac，但我已经涉足画布，我认为它更适合游戏.
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.
这篇关于简单游戏的 Canvas vs SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！