无需重新渲染即可平移Html5画布

Question

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

如果可能，这还可以应用于缩放吗？

在低端系统（Windows平板电脑）上运行时出现性能问题，其中平移只占用太多CPU并最终无法使用。范围是〜2000个图形对象。

Answer 1

不幸的是，如果没有重绘它，你就无法转换画布;但是，如果真的只是有太多的绘制调用，你可以渲染一次画布，缓存结果，然后在随后的绘制中重绘缓存的图像。请注意，根据您绘制的实际内容，此方法实际上不会超过150％。

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

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

可能会有一点跳跃，但它通常比without caching the image更好。

您的里程可能会有所不同。

Answer 2

简而言之，没有。如果要在画布上进行平移，则必须重新绘制场景，除非您执行的操作不好，例如使用CSS限制可见的画布大小并且画布实际上更大。 （不要这样做，这不是性能提升）。

但是，如果你已经写好了，那么在你平移的时候重绘你的画布应该很快。如果它是＆＃34;跳跃＆＃34;，那么赔率是其他的错误。

以上情况也适用于缩放，特别是如果您希望矢量路径/文本/等可以缩放。