原由

在看蕭大直播寫程式碼，第10次直播時，遇到一個在 Canvas 內進行圖片翻轉，裡面用到了一塊程式碼，理解起來有點繞，程式碼如下：

this.game.context.save();
let x = this.x + this.width / 2;
this.game.context.translate(x, 0);
this.game.context.scale(-1, 1);
this.game.context.translate(-x, 0);
this.game.context.drawImage(this.texture, this.x, this.y);
this.game.context.restore(); 
 

其中 context 為 Canvas 繪製 2D 環境物件， this.game 為遊戲物件，this.x、this.width 為繪製物件的 x 軸和寬。
this.context.save() 儲存畫布 save() 之前的狀態，this.game.context.restore() 恢復畫布在 save() 前的狀態。

scale(x, y)

設定屬性後，繪製物件的 (x₀, y₀) 變為 (x₀ * x, y₀ * y)，寬度為以前的 x 倍，高度為以前的 y 倍，具體點選，
其中 scale(-1, 1) 為水平翻轉繪製物件，scale(1, -1) 為垂直翻轉繪製物件。scale(-1, -1) 為水平垂直翻轉繪製物件。

translate(x, y)

設定屬性後，在現在的座標系上找到(x, y)為新的座標原點，具體點選。

解決方案

方法一

即為上面程式碼:
將座標原點設定為 ((this.x + this.width / 2), 0) 即圖的 2系 座標系，
然後設定 2系 座標原點為翻轉中心，所繪製的物體，顯示是為水平翻轉，
然後在以 2系 座標系的 (-(this.x + this.width / 2), 0) 設為座標原點即圖的 3系 座標系，
最後在 3系 座標系進行繪製物件，(this.x, this.y)，即為紅方塊，但由於 3系 在 2系 上，所以還需要翻轉，所以顯示為黃方塊，位置與紅方塊重合。
即該程式碼可完成翻轉。

方法二

下面這方法，是我看懂方法一時去洗澡想到的。對於這個問題，我只要能夠對繪製物件翻轉即可。
先設座標原點作為水平翻轉中心。
然後繪製點為相反的方向，長度為原點到繪製物件的右上點，這樣翻轉過來剛好是對應正方向的點，只是圖的水平位置進行了翻轉，即紅方塊為所繪製的物件，然後翻轉即為黃方塊位置。

this.game.context.save();
this.game.context.scale(-1, 1);
this.game.context.drawImage(this.texture, -this.x - this.width, this.y);
this.game.context.restore();

總結

實現的方案不一定相同，最主要應該知道要做什麼。