支持CSS3转换的HTML形状（最好使用DIV）

Question

我打算制作一款游戏，记住一切。我很了解HTML，CSS和Javascript，它会给我跨浏览器支持，所以一定要使用它。

我有需要，我需要显示一个div（矩形），然后在一些动作以动画其他形状，你可以在这个picture

更好看，我可以动画DIV元素或者我需要否则使用SVG或Canvas？

Answer 1

为了在浏览器中绘制任意形状，我建议使用Canvas或SVG。

我会避免试图'使用HTML <div>元素和CSS'绘图'。这是可能的，但它最好是黑客攻击，可能会变得非常混乱，我当然不想用这种技术编写游戏。

所以你最好的选择绝对是SVG或Canvas。

SVG vs 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的图形格式转换可能无法让您在游戏环境中有足够的性能。

希望有所帮助。