HTML5画布填充复杂的形状

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. beginPath方法
2. 的moveTo
3. bezierCurve for first line to opposite end point
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();