在HTML5畫布中縮放圖像

Question

我有許多對象代表想要在畫布上繪製的圖像。每個對象都有一個X，Y，Scale屬性以及一個傳遞畫布對象的渲染方法。那麼畫布標籤就會傳遞給每個對象的渲染方法，並且他們都需要將自己渲染到畫布上。

我遇到的問題是縮放是從畫布的原點進行的，而不是圖像的原點。爲了解決這個問題，我嘗試了以下內容：

canvas.translate(-this.X, -this.Y); 
canvas.scale(this.Scale, this.Scale); 
canvas.translate(this.X, this.Y); 

與上面的代碼的問題是，它看起來像你只能有1名翻譯和這應該移動的對象回到原來的位置，3號線在調用drawImage時變成翻譯。如果我刪除第三行，我會得到正確的縮放原點，但圖像將移動到0,0並且不會呈現在正確的位置。

做這種縮放類型的正確方法是什麼？

Answer 1

嘗試：

canvas.translate(this.X, this.Y); 
canvas.scale(this.Scale, this.Scale); 
canvas.translate(-this.X, -this.Y); 

但請記住，這樣做，你需要做的ctxt.save(); S和ctxt.restore();小號很多，如果你得到了imagens的寬度和高度，你可以簡單的做ctxt.drawImage(this.image, this.X, this.Y, this.Width*this.Scale, this.Height*this.Scale);因爲你不不需要混淆上下文狀態棧可能會更快。

編輯：

轉換不影響原點。發生的是他們必須在reverse order中應用。請記住，這些方法只是在轉換堆棧中堆疊矩陣的快捷方式。