画布与CSS转换

Question

我想知道是否应该在我的CSS3画布游戏中实现HTML5转换或画布转换(旋转、倾斜、缩放)。目前主要研究2D )。

我打算在android上用它做铬。

我找不到确切的答案。

每种方法的性能增益和总体利弊是什么？

Answer 1

这取决于目的。

如果使用CSS3转换，它只会影响画布元素，而不会影响其内容(位图)，而使用画布本身的转换确实会影响内容。

另一个不同之处是，CSS3转换影响画布及其当前位图，总的来说，没有差别.使用画布上下文的局部转换，您可以更改每个绘图之间的转换矩阵，以不同的方式影响不同的形状。

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

我相信浏览器共享相同的转换过程(在核心部分)，因此性能本身并没有什么不同(理论上)。使用画布的本地转换(但由于JavaScript本身)仍然会影响性能，而CSS3转换是在本机编译代码中调用的。

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

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

我的建议是:对于游戏使用，画布通常更好。您可以使用CSS制作更简单的游戏，但我建议您使用画布。

(免责声明:我想在我的回答中，你是画布的意思，而不是一般的内容)。