推薦：html5 svg 中元素點(diǎn)擊事件添加方法
最近在用svg的點(diǎn)擊事件做東西，之所以用svg而不用canvas就是因?yàn)閟vg內(nèi)的元素可以添加點(diǎn)擊事件，接下來詳細(xì)介紹添加方法，感興趣的朋友可以了解下

在canvas中可以很方便的用arc方法畫出圓形，本來圓形也可以看作是一個寬高相等的橢圓，但canvas中根本沒有畫橢圓的方法，我們要用其他方法來模擬。
我們首先要明確畫一個橢圓需要那些參數(shù)，基本的幾何知識告訴我們，橢圓需要圓心坐標(biāo)，寬度，高度——或者還有旋轉(zhuǎn)角度，不過這個可以暫時不要，旋轉(zhuǎn)是比較容易的。
1,使用lineTo畫橢圓
你沒有看錯，lineTo這樣一個純粹用來畫直線的方法居然可以用來畫橢圓！？但他確實(shí)存在，不過寫法實(shí)在是有些不可思議：


這個方法的原理是，一個圓有360度，那么就用lineTo循環(huán)360次，畫出每一度的線段，最終連成一個橢圓。其中需要用到三角函數(shù)正弦余弦進(jìn)行計(jì)算。
注意，這個方法的第2個參數(shù)是個數(shù)組，即橢圓的圓心坐標(biāo).

思路很奇葩，而且畫出的橢圓也比較平滑。但不值得大家使用——此方法每畫一個橢圓，就要循環(huán)360次，只有畫的橢圓稍微一多，對瀏覽器的性能就是個考驗(yàn)。
我們只用了解一下他的思路即可
2,使用arc畫圓，然后把他縮放成一個橢圓
這個方法的原文在此，核心函數(shù)如下：


此方法用了一個我前面還沒講過的canvas函數(shù)，即scale，他能實(shí)現(xiàn)canvas的縮放。縮放有水平和垂直兩個方向，代碼中把canvas水平方向放大了，而垂直方向不變，so,原來arc畫出的圓形就變成了一個橢圓。
這個方法初看甚妙，代碼少，而且原理淺顯易懂。但分析一下就能發(fā)現(xiàn)他的明顯缺點(diǎn)了，就是——不精確！比如我需要寬171高56的橢圓，此時我們?nèi)绻�把a(bǔ)rc的半徑定為28的話，那么后面就要為171/28/2這個蛋疼的不知所云的數(shù)字郁悶了。

不過有個折中的辦法是始終把a(bǔ)rc的半徑設(shè)成100，然后，不夠就放大，超過了就縮小。但是，還是不精確。
3，使用貝賽爾曲線bezierCurveTo
自從覺得上面的縮放法不精確后，我就很想找到一個精確的畫橢圓的方法，最后在stackoverflow上找到了：


這個方法可以算是比較完美的了。他把一個橢圓分成了4條貝塞爾曲線，用他們連成了一個橢圓。最后寬度高度也比較精確，開銷也較少。
但此方法依然有缺點(diǎn)。大家看那個kappa參數(shù)，有個很奇特的值，相信很多人在幾何專家告訴你為什么他要取這個值之前，都不明白為什么非要取這個值——我到現(xiàn)在還是不知道。并且我有很強(qiáng)烈的想把他改一下看看有什么后果的沖動。

當(dāng)然我這種類似強(qiáng)迫癥患者的沖動并不能說成是此方法的缺點(diǎn)，他真正的缺點(diǎn)是——為什么要用4條貝塞爾曲線？我個人覺得，一個橢圓明顯是由兩條貝塞爾曲線組成的而不是4條。這個想法最終讓我找到了最完美的畫橢圓的方法。
 4，使用兩條貝賽爾曲線畫出橢圓
為了了解上一個方法能否精簡，我專門注冊了一個stackoverflow的帳號去提問，由于問題里有圖片，積分不夠不能傳，我還迫不得已用勉勉強(qiáng)強(qiáng)的英語水平去回答老外的問題掙積分。但最終好運(yùn)到了，回答一個問題就解決了我的積分問題。
我提的貝賽爾曲線和橢圓的關(guān)系的問題在此.
說實(shí)話，下面老外的回答我大部分沒看懂，但幸虧他提供了一個代碼示例頁，讓我明白了原理，在此對他表示再次的感謝。而根據(jù)他的解答，我找到的畫橢圓的方法如下：


此方法既精確，又代碼少，而且也沒有奇怪的難懂的地方。只需要記住這一點(diǎn)，橢圓的寬度與畫出橢圓的貝賽爾曲線的控制點(diǎn)的坐標(biāo)比例如下：
貝塞爾控制點(diǎn)x=(橢圓寬度/0.75)/2這一點(diǎn)已經(jīng)在代碼中體現(xiàn)了。

大家可自行試驗(yàn)上面的4個方法畫出橢圓。
如果你發(fā)現(xiàn)了更簡單的方法，也請分享出來大家探討吧。

分享：HTML5之SVG 2D入門5—顏色的表示及定義方式
SVG和canvas中是一樣的，都是使用標(biāo)準(zhǔn)的HTML/CSS中的顏色表示方法，這些顏色都可以用于fill和stroke屬性,接下來介紹下顏色的表示及定義方式感興趣的朋友可以了解下，或許對你有所幫助