DIV CSS 佈局教程網

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

示例代碼：

復制代碼代碼如下:www.mb5u.com
<canvas width="400" height="300"></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影響了。

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

示例代碼：

復制代碼代碼如下:www.mb5u.com
[code]
<canvas width="400" height="300"></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.