HTML5 Canvas 填充复杂形状

Question

我有以下代码片段：

      context.beginPath();
      context.moveTo(284 + xoff, 119 + yoff);
      context.bezierCurveTo(46 + xoff, 189 + yoff, 39 + xoff, 60 + yoff, 243 + xoff, 29 + yoff);
      context.moveTo(284 + xoff, 119 + yoff);
      context.bezierCurveTo(239 + xoff, 130 + yoff, 104 + xoff, 105 + yoff, 243 + xoff, 29 + yoff);

      context.strokeStyle = "#e2252c"; // line color
      context.stroke();
      context.closePath();

每次我填充这个形状时，尽管轮廓是一种土星环，但填充似乎将其填充为半椭圆形，有没有一种方法可以让填充只填充在我设置的线条之间。我试过剪裁，但这从来没有奏效。我错过了什么吗？

Answer 1

这里的问题是你在跳来跳去。想想像使用 Etch-a-Sketch 一样创建您的路径。你不能画一条线，然后跳到另一点再画另一条。相反，你必须画一个，然后从你停止的地方继续。为此，您需要执行以下操作：

1. 开始路径
2. 移到
3. 第一行到相对端点的贝塞尔曲线
4. bezierCurve 返回到您执行 moveTo 到的点
5. 中风
6. 填写

以下对我有用（只是我的第二条曲线需要调整以满足您的需求）：

context.beginPath();
context.moveTo(284 + xoff, 119 + yoff);
context.bezierCurveTo(46 + xoff, 189 + yoff, 39 + xoff, 60 + yoff, 243 + xoff, 29 + yoff);
context.bezierCurveTo(46 + xoff, 189 + yoff, 39 + xoff, 60 + yoff, 284 + xoff, 119 + yoff);
context.closePath();
context.strokeStyle = "#e2252c"; // line color
context.fillStyle = "#2C6BA1";
context.stroke();
context.fill();