點(diǎn)評(píng)：Canvas里繪制橢圓是一個(gè)很常見的需求，但是目前大多數(shù)瀏覽器還沒有實(shí)現(xiàn)該方法，因此經(jīng)常會(huì)使用arc或者arcTo方法結(jié)合scale變形來繪制橢圓，感興趣的朋友可以了解下，希望可以幫助到你們

Canvas里繪制橢圓是一個(gè)很常見的需求，比較新的HTML Canvas 2D Context W3C草案里面新增了ellipse方法繪制橢圓，但是目前大多數(shù)瀏覽器還沒有實(shí)現(xiàn)該方法，所以需要用arc或者arcTo方法結(jié)合scale變形來繪制橢圓。

示例代碼：

復(fù)制代碼

<canvas></canvas>
<script>
var ctx = documentquerySelector('canvas')getContext('2d');
ctxlineWidth = "10";
ctxscale(1,2);
ctxarc(150,150,100,0,MathPI*2,false);
ctxstroke();
</script>

要修正這個(gè)問題，就要一點(diǎn)點(diǎn)小技巧了。

示例代碼：

復(fù)制代碼

[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>

技巧就在先save保存畫布狀態(tài)，然后縮放、調(diào)用路徑指令，再restore恢復(fù)畫布狀態(tài)，再stroke繪制出來。

關(guān)鍵點(diǎn)是先save后縮放，先restore后stroke.