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

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.