支持 CSS3 转换的 HTML 形状（最好带有 DIV）
我计划制作一款游戏，并把一切都考虑在内。我很了解 HTML、CSS 和 Javascript，它会给我跨浏览器支持，所以我肯定会使用它。
我需要显示一个 div（矩形），然后根据某些操作将其动画化为其他形状，您可以在此 图片
我可以为 DIV 元素添加动画吗？否则我需要使用 SVG 或 Canvas？
I plan to build a game an have everything in mind. I know HTML, CSS and Javascript good and it would give me cross browser support so going to use it for sure.
I have a need where I need to show a div (rectangle) and then upon some action animate it to the other shape which you can better see in this picture
Can I animate DIV element or I would need to use SVG or Canvas otherwise?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
为了在浏览器中绘制任意形状，我建议使用 Canvas 或 SVG。
我会避免尝试使用 HTML
元素和 CSS 进行“绘制”。这是可能的，但它充其量只是一种黑客行为，并且可能会变得非常混乱，我当然不想使用这种技术来编写游戏。所以你最好的选择肯定是 SVG 或 Canvas。
SVG 与 Canvas 的选择不仅取决于您想要支持的平台/浏览器，还取决于这两种技术的属性。
显然，您已经知道 SVG（矢量图形）和 Canvas（像素图形）之间的主要区别，但是两者也有不同的浏览器支持，这一点需要考虑到。
根据您提供的有限信息，我想说 SVG 看起来最适合您正在做的事情。然而，Android 浏览器尚不支持 SVG，因此如果您希望游戏在移动设备上运行，则需要考虑到这一点。这可能意味着您需要使用 Canvas。
如果您坚持使用桌面，所有现代浏览器都支持 Canvas 和 SVG。显然，IE8 及更早版本中都缺少这两种格式，但 IE 确实支持一种称为 VML 的竞争格式，它是一种类似于 SVG 的基于 XML 的矢量语言。
如果您想支持 IE8（很可能您不想支持！），可以使用适用于 IE 的 javascript 库，这些库将使用 IE 的 VML 引擎呈现 Canvas 和 SVG 图形。显然这对于 SVG 非常有效，因为这两种语言非常相似。我听说过关于画布转换的报道稍微复杂一些，但您可能想尝试一下。请记住，IE8 的 Javascript 引擎非常慢，因此基于 javascript 的图形格式转换可能无法为您提供足够的性能以在游戏环境中发挥作用。
希望有帮助。
For drawing arbitrary shapes in the browser, I would suggest using either Canvas or SVG.
I would avoid trying to 'drawing' using HTML
<div>elements and CSS. This is possible, but it is a hack at best and can get quite messy, and I certainly wouldn't want to write a game using this technique.So your best choices are definitely either SVG or Canvas.
The choice of SVG vs Canvas depends as much on what platforms/browsers you want to support as it does on the properties of the two technologies.
Obviously you already know the main difference between SVG (vector graphics) and Canvas (pixel graphics), but the two have differing browsers support as well, which is important to take into account.
With the limited information you've given, I would say that SVG looks like the most natural fit for what you're doing. However, SVG is not yet supported by the Android browser, so if you want your game to run in mobile devices, you need to take that into consideration. This would probably mean you need to use Canvas instead.
If you're sticking to the desktop, all modern browsers support both Canvas and SVG. Obviously both are missing from IE8 and earlier, but IE does support a competing format called VML, which is an XML-based vector language similar to SVG.
If you want to support IE8 (and it's quite possible that you don't!), there are javascript libraries available for IE which will render both Canvas and SVG graphics using IE's VML engine. Obviously this works very well for SVG as the two languages are quite similar. I've heard slightly more mixed reports about the canvas conversion, but you may want to give it a try. Bear in mind that IE8's Javascript engine is quite slow, so a javascript-based graphics format conversion may not give you sufficient performance to be useful in the context of a game.
Hope that helps.