Заполните вогнутые формы на холсте

Question

Я рисую вогнутую форму на холсте, используя следующий код:

    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = '#FFFFFF';
    ctx.fillStyle = '#000000';
    ctx.beginPath();
    ctx.arc(0, 0, this.radius, Math.PI*13/8, Math.PI*11/8, false);
    ctx.moveTo(this.radius * Math.sin(Math.PI/8), -(this.radius) * Math.cos(Math.PI/8));
    ctx.arc(0, -(this.radius) * Math.cos(Math.PI/8), this.radius * Math.sin(Math.PI/8), 0, Math.PI, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();

Нарисованная форма должна быть кругом с вырезанным еще одним меньшим кругом, и он отображается правильно, когда я использую ctx.stroke () для его рисования. Однако, когда я пытаюсь использовать ctx.fill () (как того требует контекст), заполняется только большой круг, охватывающий меньший круг.

Как мне сделать так, чтобы фигура была правильно заполнена в пределах границы обводки?

Спасибо

DLiKS

Answer 1

Вы можете нарисовать большой круг, а затем вырезать из него маленький круг:

https://developer.mozilla.org/en/Canvas_tutorial/Compositing

Попробуйте "получатель-выход":

    ctx.strokeStyle = '#FFFFFF';
    ctx.fillStyle = '#000000';
    ctx.beginPath();
    ctx.arc(0, 0, this.radius, Math.PI * 13 / 8, Math.PI * 11 / 8, false);
    ctx.closePath();
    ctx.fill();

    ctx.globalCompositeOperation = "destination-out";
    ctx.beginPath();
    ctx.moveTo(this.radius * Math.sin(Math.PI / 8), -(this.radius) * Math.cos(Math.PI / 8));
    ctx.arc(0, -(this.radius) * Math.cos(Math.PI / 8), this.radius * Math.sin(Math.PI / 8), 0, Math.PI, false);
    ctx.closePath();
    ctx.fill();

Мне пришлось использовать переводчик, чтобы увидеть оригинальный пример, так что это может быть не совсем правильно.