溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“html5中怎么用canvas繪制橢圓并保持線條粗細均勻”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“html5中怎么用canvas繪制橢圓并保持線條粗細均勻”吧!
Canvas里繪制橢圓是一個很常見的需求，比較新的HTML Canvas 2D Context W3C草案里面新增了ellipse方法繪制橢圓，但是目前大多數瀏覽器還沒有實現該方法，所以需要用arc或者arcTo方法結合scale變形來繪制橢圓。
示例代碼：
復制代碼
代碼如下:
<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影響了。
要修正這個問題，就要一點點小技巧了。
示例代碼：
復制代碼
代碼如下:
[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.
到此，相信大家對“html5中怎么用canvas繪制橢圓并保持線條粗細均勻”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
