如何规范化路径（形状）以便在HTML5 Canvas中填充它

Question

我是HTML5画布的新手，试图填充这个形状：

这是我用来绘制它的代码：

    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();
    }

现在，当我从笔触变为填充时，我得到了这个：

我知道这是绘图顺序的问题，我曾经通过翻转空白部分在3D Studio Max这样的软件中解决这个问题，但在这里我迷路了，我不知道该怎么办解决这个问题。

我希望整个形状能够正常填充，我不知道如何解释它，但我想图像说明了一切，这就是我想要的：

Answer 1

你会注意到你所做的一些有趣的事情：你用moveTo命令拿起你的笔。如果你想填补，这是不好的。没有moveTo，你的形状看起来真的像这样：

填充看起来很奇怪的原因是因为这些moveTo s。你之所以使用moveTo是因为你以一种有趣的方式使用了arc。

我的建议不是以这样的方式使用arc，以至于结束点是你期望的，或者完全使用bezier或quadractic。

在我看来，使用电弧有点痛苦，所以我建议改用bezier / quadratic曲线。

Here's an example of a similar shape done with quadratic curves instead.我没有得到相同的控制点，你必须自己做这一点。

用样方法绘制：