放大和縮小畫布

Question

我使用HTML5 canvas元素編寫了一個繪畫應用程序。

現在我想讓用戶在繪畫時放大和縮小選項。

我該怎麼做？

Answer 1

有幾種方法。這真的取決於你在找什麼。

您可以通過縮放整個上下文來完成，如ctx.scale(2,2)，然後在這個較大的範圍內重新繪製所有內容。一些繪製的東西，如路徑和文本，將會優雅地縮放。要做到這一點，您需要對迄今爲止繪製的所有內容保持良好的跟蹤。

另一種方法是將整個畫布拉回自己。這需要一個臨時畫布，因爲該操作實際上是：繪製到臨時畫布，清除主畫面，回到主縮放畫面。

另一種方法是使用CSS變換來僅縮放畫布本身，這會使圖像模糊（縮放！），但不需要更改畫布上已有的任何像素。