旋转 HTML5 画布很慢？答案

【问题标题】：Rotating HTML5 canvas slow?旋转 HTML5 画布很慢？
【发布时间】：2011-10-12 22:30:46
【问题描述】：

我正在尝试在画布上使用旋转，我现在有了它，所以每个对象都有自己的旋转。如果没有它们旋转，我可以在一台非常低端的计算机上在屏幕上显示大约 400 个对象，在一台正常库存的 PC 上显示近 2000 个对象。当我将旋转因素考虑到超过 0 时，性能至少会下降三分之一！

为什么只是改变旋转速度会减慢这么多？这是一幅画布奇怪的问题吗？

我有一个全局旋转变量，并且在开始绘制每个对象时我：

ctx.rotate(globRot);

【问题讨论】：

您使用哪种浏览器？ “库存电脑”的CPU等级是多少？有显卡吗？
正常库存是指去年购买的一台不错的电脑。没有什么了不起的，只是体面。而蹩脚的电脑是很蹩脚的电脑，很可能无法运行xp。但这并不重要，不是吗？我刚刚添加了它以参考旋转前的速度
根据我的经验，轮换不是问题。看看 fabric.js 的一些演示/基准测试 - kangax.github.com/fabric.js/demos
旋转确实会减慢并影响性能。有多种替代方法，例如使用图像精灵或缓存旋转的图像...

【解决方案1】：

对于单个对象缓存旋转。 Some of my findings.

Cached rotations demo（注意使用箭头向上移动以找到僵尸）

【讨论】：

【解决方案2】：

我猜可能会花费大量时间来实际创建和乘以the matrix for the transformation。如果您可以（找到一种方法）在未更改时缓存转换，那可能会有所帮助。也许吧。

【讨论】：

这就是我所担心的。我真的希望能够旋转其中的所有内容，因为我想要一个旋转相机
这只是一种预感。但是嗯——如果你想要一个旋转的相机，那么为什么你要单独旋转每个对象而不是在绘制任何东西之前旋转（-camera.rotation）？（反正我可能会误解你在做什么......）
要模拟相机旋转，我必须旋转正在绘制的每个对象。事实上，这实际上是任何游戏中正在做的事情，它是移动和旋转的对象，而不是相机。不确定 3D 游戏
要模拟围绕其 Z 轴旋转的相机（在 2D 游戏中，无论如何这是唯一的旋转轴），您需要在绘制任何内容之前旋转场景的整个渲染（原样）矩阵.这样，对象的所有位置和角度也将“自然”正确旋转。一个 Jsfiddle 演示了这一点：jsfiddle.net/jWv8J/2