如何normlize路徑（形狀），以填補其在HTML5畫布

Question

我是新來的HTML5畫布繪製IM試圖填補這一形狀：

這是我使用的代碼把它畫：

function load() { 
     draw(); 
    } 

    function draw() { 
     var ctx = document.getElementById("canvas").getContext('2d'); 
     ctx.beginPath(); 
     ctx.moveTo(37, 205); 
     ctx.lineTo(79, 160); 
     ctx.lineTo(136, 221); 
     ctx.lineTo(167, 188); 
     ctx.lineTo(124, 141); 
     ctx.quadraticCurveTo(113, 129, 127, 113); 
     ctx.lineTo(204, 28); 
     ctx.moveTo(149, 22); 
     ctx.arc(174, 45, 34, (223 * Math.PI)/180, (330 * Math.PI)/180); 
     ctx.moveTo(149, 22); 
     ctx.lineTo(38, 138); 
     ctx.moveTo(37, 205); 
     ctx.arc(66, 171, 43, (129 * Math.PI)/180, (230 * Math.PI)/180); 
     ctx.stroke(); 
    } 

現在，當我從行程變化，以填補我得到這個：

我知道it'sa與繪圖的順序問題，我用翻起空部分解決這一問題中，如3D Studio Max的軟件，但這裏我真的失去了，我不知道我應該做的解決這個問題。

我想整個形狀正常填補，我不知道該如何解釋，但我猜圖片說，這一切，這是我想：

Answer 1

你會注意到一些有趣的關於您所做的路徑：你拿起你的筆moveTo命令。如果你想填補，這是不好的。如果沒有的moveTo，你的形狀真的是這樣的：

填充看起來很奇怪，是因爲這些moveTo S的。而你使用moveTo的原因是因爲你以有趣的方式使用了arc。

我的建議是不是不使用圓弧以這樣的方式結束點是你所期望的，或者使用貝塞爾曲線或二次型，而不是完全。

在我看來，弧線是一種很好用的痛苦，所以我建議只用貝塞爾/二次曲線來代替。

Here's an example of a similar shape done with quadratic curves instead.我沒有得到相同的控制點，雖然，你必須做一點你自己。

與二次方程式得出：