Canvas vs CSS Transformations

Question

我想知道是否应该在我的HTML5 canvas游戏中实现CSS3转换或画布转换（旋转，倾斜，缩放......现在主要是2D）。
我打算将它用于android上的chrome。
我找不到任何明确的答案。
各自的性能收益和总体利弊分别是什么？

Answer 1

这取决于目的。

如果使用CSS3转换，它将仅影响画布元素而不是其内容（位图），而使用画布自己的转换会影响内容。

另一个区别是，CSS3转换会影响画布及其当前位图总而言之，没有区别。使用画布上下文的局部变换，可以更改每个画图之间的变换矩阵，以影响不同形状的不同方式。

如果您不需要对画布中的不同形状进行单独转换，并且无需提取分析/操作转换内容的像素，那么CSS3可能是更好的选择。

我相信浏览器共享相同的转换过程（在核心），所以性能本身没有什么不同（理论上）。使用canvas的本地转换仍然存在性能问题，但是由于JavaScript本身，而CSS3转换在本地编译代码内部调用。

与为每个所需转换设置CSS规则相比，Canvas可以为您提供更好，更简单的细节控制。

使用画布转换的一个缺点是读取例如相对于元素而不是转换位图的鼠标位置。这意味着您需要使用逆矩阵来弥补这一点。你可以通过使用绝对变换而不是累积的变换来解决这个问题，你可以为每个帧更新设置和重置。

我的推荐：对于游戏使用画布通常更好。您可以使用CSS制作更简单的游戏，但我会为这些东西推荐画布。

（免责声明：我认为在我的答案中，你是一个画布的意义内容，而不是一般意义上的）。