HTML5 Canvas Fill Сложная форма

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

Проблема в том, что вы прыгаете вокруг. Думайте о создании своего пути как о работе с надписью «Этюд-а-Скетч». Вы не можете нарисовать одну линию, затем перепрыгнуть в другую точку и нарисовать другую. Вместо этого вы должны нарисовать один, затем продолжить с того места, где вы остановились. Чтобы это работало, вам нужно сделать следующее:

1. beginPath
2. MoveTo
3. bezierCurve для первой линии в противоположную конечную точку
4. bezierCurve к тому моменту, когда вы переместились в
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();