平移Html5畫布而不重新渲染

Question

我想在我的Html5畫布上平移，而不必在平滑過渡（而不是跳動）下重新渲染。這可能嗎？有代碼示例嗎？

如果可能的話，這也適用於縮放嗎？

在低端系統（Windows平板電腦）上運行時，我遇到了性能問題，在這種平臺中，平移只是用盡了太多CPU，並且最終無法使用。範圍是〜2000個圖形對象。

Answer 1

總之，沒有。如果要在畫布上平移，必須重新繪製場景，除非使用CSS來限制可見畫布大小，而且畫布實際上更大。 （不要這樣做，這不是性能增益）。

但是，如果你寫得很好，重繪畫布的速度應該很快。如果它是「跳動的」，那麼賠率在這裏是錯誤的。

上述對縮放也是如此，特別是如果你想要你的矢量路徑/文本/等縮放。

Answer 2

不幸的是，您不能在不重繪的情況下轉換畫布;然而，如果它實際上只是一個繪製調用過多的問題，那麼您可以渲染一次畫布，緩存結果，然後在隨後的繪製中重新繪製緩存的圖像。請注意，根據你正在繪製的實際情況，這種方法實際上不會很好地擴展到可能的150％。

我做了一個小提琴，顯示這是什麼可能看起來像：

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

可以有跳動的一點點，但它通常比它是without caching the image。

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