canvas怎么繪制一個(gè)橢圓形？很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

專注于為中小企業(yè)提供網(wǎng)站制作、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)石棉免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

首先我們來看一下canvas自帶的繪制橢圓的方法

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)。

參數(shù)（從左到右）：

(起點(diǎn)x,起點(diǎn)y,半徑x,半徑y(tǒng),旋轉(zhuǎn)的角度，起始角，結(jié)果角，順時(shí)針還是逆時(shí)針)

我們來看canvas自帶的繪制橢圓的方法代碼：

    
    



    當(dāng)前瀏覽器不支持Canvas，請更換瀏覽器后再試

canvas畫的橢圓效果如下：

說明：這種方法目前似乎只有谷歌支持，其他瀏覽器還未存在ellipse()。

既然上述方法無法支持其他瀏覽器，我們就來看看其他canvas繪制橢圓的方法。

一、利用canvas畫圓的方法來繪制一個(gè)橢圓

這種方法用到了一個(gè)canvas函數(shù)scale，scale函數(shù)能實(shí)現(xiàn)canvas的縮放?？s放有水平和垂直兩個(gè)方向，代碼中把canvas水平方向放大了，而垂直方向不變，因此，原來arc畫出的圓形就變成了一個(gè)橢圓。

canvas繪制橢圓的代碼如下：

canvas橢圓效果如下：

二、canvas畫橢圓之使用貝賽爾曲線繪制橢圓

這種方法繪制橢圓是把一個(gè)橢圓分成了4條貝塞爾曲線，用他們連成了一個(gè)橢圓。

canvas繪制橢圓的代碼如下：

    
    



    當(dāng)前瀏覽器不支持Canvas，請更換瀏覽器后再試

canvas橢圓效果如下：

三、canvas畫橢圓之使用兩條貝賽爾曲線畫出橢圓

canvas繪制橢圓的代碼如下：

//橢圓 
CanvasRenderingContext2D.prototype.oval = function (x, y, width, height) {
 var k = (width/0.75)/2, 
w = width/2, 
h = height/2; 
this.beginPath(); 
this.moveTo(x, y-h); 
this.bezierCurveTo(x+k, y-h, x+k, y+h, x, y+h); 
this.bezierCurveTo(x-k, y+h, x-k, y-h, x, y-h); 
this.closePath(); return this; 
}

注意：這個(gè)方法只需要記住這一點(diǎn)，橢圓的寬度與畫出橢圓的貝賽爾曲線的控制點(diǎn)的坐標(biāo)比例如下：

貝塞爾控制點(diǎn)x=(橢圓寬度/0.75)/2。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。