svg vs canvas - 浏览器游戏地图？

Question

我正在尝试复制流行的浏览器游戏 Travian.com。我目前正在绘制地图，并且能够以png 的形式获取农场概览图像。

我想用这张地图完成的是：

• 每个元素（农场）都应该是可点击的）并重定向到特定的农场页面。
• 正如您在地图上看到的那样，农场不仅仅是简单的正方形。

获得farms.png 图片后，我使用在线工具将png 转换为.svg 文件。使用免费软件，我能够在每张地图周围画圈来构建我的svg。

这是结果：

我最近阅读了有关画布的文章，我想知道在我的情况下，画布是否会是更好的选择，而不是使用svg？

Answer 1

您需要自己尝试一下，看看它是否能足够快地重绘以使游戏对您有足够的响应能力。如果地图非常详细，重绘可能会太慢，让你的游戏感觉很慢。你真的需要试试看。如果它对您来说太慢，那么您可能需要：

• 使用位图图像，或
• 将地图保留为 SVG，但在首次加载时将其渲染为 Canvas。这样一来，无论用户使用何种分辨率屏幕，它们都会变得清晰。