html - 平移 Html5 画布而不重新渲染

Question

我想在我的 Html5 画布上平移而不必重新渲染，平滑过渡（不跳跃）。这可能吗？有代码示例吗？

如果可能的话，这也可以应用于缩放吗？

在低端系统（Windows 平板电脑）上运行时，我遇到了性能问题，其中平移只会占用过多的 CPU 并最终无法使用。范围是~2000 个图形对象。

Answer 1

不幸的是，你不能在不重绘画布的情况下变换它。但是，如果真的只是绘制调用过多的问题，您可以渲染一次画布，缓存结果，然后在后续绘制时重绘缓存的图像。请注意，此方法无法很好地缩放超过 150%，具体取决于您绘制的实际内容。

我做了一个小提琴，展示了这可能是什么样的：

http://jsfiddle.net/mobidevelop/sBvab/

可能会有一点跳动，但通常比不缓存图像要好。

你的旅费可能会改变。

Answer 2

In short, no. You must redraw the scene if you want panning on the canvas, unless you're doing something bad, like using CSS to limit visible canvas size and your canvas is actually larger. (Don't do this, it isn't a performance gain).

But redrawing your canvas as you pan ought to be fast if you've written it well. If it is "jumpy", then odds are something else is wrong here.

The above is also true for zooming, especially if you want your vector paths/text/etc to scale.