HTML5 Canvas裡繪製橢圓並保持線條寬度均勻的方法

Canvas裡繪製橢圓是一個很常見的需求，比較新的HTML Canvas 2D Context W3C草案裡面新增了ellipse方法繪製橢圓，但是目前大多數瀏覽器還沒有實現該方法，所以需要用arc或者arcTo方法結合scale變形來繪製橢圓。

範例程式碼：

<canvas width="400" height="300"></canvas><script>var ctx = document.querySelector('canvas').getContext('2d');ctx.lineWidth = "10";ctx.scale(1, 0.2);ctx.arc(150,150,100,0,Math.PI*2,false);ctx.stroke();</script>

有點不對，因為線條寬度不均勻了，stroke也被scale影響了。

要修正這個問題，就要一點點小技巧了。

範例程式碼：

<canvas width="400" height="300"></canvas><script>var ctx = document.querySelector('canvas').getContext('2d');ctx.lineWidth = "10";ctx.save();ctx.scale(1, 0.2);ctx.arc(150,150,100,0,Math.PI*2,false);ctx.restore();ctx.stroke();</script>

現在均勻了，非常完美。

技巧就在先save儲存畫布狀態，然後縮放、調用路徑指令，再restore恢複畫布狀態，再stroke繪製出來。

關鍵點是先save後縮放，先restore後stroke.