平移Html5画布而不重新绘制



我想在Html5画布上平移,而不必重新渲染,以平滑过渡(而不是跳跃)。这可能吗?有代码示例吗?

如果可能,这也可以用于缩放吗?

在低端系统(windows平板电脑)上运行时,我遇到了性能问题,平移只会占用太多的cpu,最终无法使用。范围约为2000个图形对象。

不幸的是,如果不重新绘制画布,就无法对其进行转换;但是,如果真的只是有太多draw调用的问题,那么可以渲染画布一次,缓存结果,然后在随后的绘制中重新绘制缓存的图像。注意,这种方法不会很好地缩放超过150%,这取决于你正在绘制的实际内容。

我做了一把小提琴,展示了这可能是什么样子:

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

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

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

简而言之,不。如果你想在画布上平移,你必须重新绘制场景,除非你做了一些不好的事情,比如使用CSS限制可见画布的大小,而你的画布实际上更大。(不要这样做,这不是性能提升)。

但是,如果你写得好,在平移时重新绘制画布应该会很快。如果它是"跳跃",那么很可能是其他地方出了问题。

以上内容也适用于缩放,尤其是如果您希望缩放矢量路径/text/etc。

最新更新