html5中怎么用canvas繪制橢圓并保持線條粗細(xì)均勻

本篇內(nèi)容主要講解“html5中怎么用canvas繪制橢圓并保持線條粗細(xì)均勻”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“html5中怎么用canvas繪制橢圓并保持線條粗細(xì)均勻”吧!

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

示例代碼：

復(fù)制代碼

代碼如下:

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

有點(diǎn)不對(duì)，因?yàn)榫€條粗細(xì)不均勻了，stroke也被scale影響了。

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

示例代碼：

復(fù)制代碼

代碼如下:

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

現(xiàn)在均勻了，非常完美。

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

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

到此，相信大家對(duì)“html5中怎么用canvas繪制橢圓并保持線條粗細(xì)均勻”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！