html5 canvas裡繪製橢圓並保持線條粗細均勻的技巧

點評：Canvas裡繪製橢圓是一個很常見的需求，但是目前大多數瀏覽器還沒有實現該方法，因此經常會使用arc或者arcTo方法結合scale變形來繪製橢圓，感興趣的朋友可以了解下，希望可以幫助到你們

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

示例代碼：

<canvas></canvas>

<script>

var ctx = documentquerySelector('canvas')getContext('2d');

ctxlineWidth = "10";

ctxscale(1,2);

ctxarc(150,150,100,0,MathPI*2,false);

ctxstroke();

</script>

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

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

示例代碼：

[code]

<canvas></canvas>

<script>

var ctx = documentquerySelector('canvas')getContext('2d');

ctxlineWidth = "10";

ctxsave();

ctxscale(1,2);

ctxarc(150,150,100,0,MathPI*2,false);

ctxrestore();

ctxstroke();

</script>

[/code]

現在均勻了，非常完美。

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

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