Canvas裡繪製橢圓是一個很常見的需求，比較新的HTML Canvas 2D Context W3C草案裡面新增了ellipse方法繪製橢圓，但是目前大多數瀏覽器還沒有實現該方法，所以需要用arc或arcTo方法結合scale變形來繪製橢圓。
範例程式碼：
程式碼如下:
<script> <br />var ctx = documentquerySelector('canvas')getContext('2d'); <br />ctxlineWidth = "10"; <br />ctxscale(1,2); <br />ctxarc(150,150,100,0,MathPI*2,false); </script>
ctxstroke();
有點不對，因為線條粗細不均勻了，stroke也被scale影響了。
要修正這個問題，就要一點點小技巧了。
程式碼如下:
程式碼如下:
程式碼如下:
程式碼如下:
程式碼如下:
程式碼如下:程式碼如下：
<script> <🎜>var ctx = documentquerySelector('canvas')getContext('2d'); <🎜>ctxlineWidth =ctxlineWidth =ctxlineWidth =ctxlineWidth =ctxlineWidth =ctxlineWidth =ctxlineWidth =ctxlineWidth =ctxlineWidth =ctxlineWidth =ctxlineWidth = "10"; <🎜>ctxsave(); <🎜>ctxscale(1,2); <🎜>ctxarc(150,150,100,0,MathPI*2,false); <🎜>ctxrestore(); <🎜>ctxstroke(); ; <🎜></script> [/code]
現在均勻了，非常完美。
技巧就在先save保存畫布狀態，然後縮放、呼叫路徑指令，再restore恢復畫布狀態，再stroke繪製出來。
關鍵點是先save後縮放，先restore後stroke.
