畫布轉換渲染

Question

有沒有辦法將轉換應用於畫布元素（scale或translate或setTransform），而無需先清除畫布，然後重新繪製所有內容。我的具體效果是使用鼠標拖動圖形（所以只需translate一遍又一遍地用鼠標），但每次翻譯我都必須清除畫布並重新繪製我在那裏的內容。理想情況下，我只想調用translate方法，並使用一些超快的內置方法爲我重新佈置畫布。一旦有足夠的東西需要重新繪製，只是迭代和重繪的成本會導致性能低於預期。

任何想法如何提高這裏的表現？

Answer 1

您將不得不重繪每一次，因爲平移，旋轉和縮放僅將參數設置爲畫布，並且不對現有內容執行任何操作。它們只適用於畫在畫布上的下一個東西。

但是，您可以嘗試使用CSS進行轉換。這將轉換包含其內容的畫布元素。

請注意，在這種情況下，您需要計算鼠標座標的反偏移量（同樣，如果您在畫布本身上保留轉換）。