Заливка сектора

Рейтинг: 0Ответов: 2Опубликовано: 12.11.2014

Есть скрипт, который вырисовывает сектор окружности. Но когда я хочу залить этот сектор, он заливает только сегмент. В чём ошибка?
Клац!

javascript canvas
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Я не знаю, по какой логике он заполняет контур и выполняет заливку, но правильно будет так:

    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(50+Math.cos((Math.PI/180)*0)*40, 50+Math.sin((Math.PI/180)*0)*40);
    ctx.moveTo(50, 50);
    ctx.lineTo(50+Math.cos((Math.PI/180)*40)*40, 50+Math.sin((Math.PI/180)*40)*40);
    ctx.closePath();

    ctx.arc(50, 50, 40, (Math.PI/180)*0, (Math.PI/180)*40, false);

    ctx.stroke();
    ctx.fill();

Пример на jsfiddle.

▲ 0

У предыдущего комментатора получилось по сути чудом. Правильно - начать путь через moveTo, пройти его через lineTo и arc, но без moveTo и потом заливать:

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50+Math.cos((Math.PI/180)*0)*40, 50+Math.sin((Math.PI/180)*0)*40);
ctx.arc(50, 50, 40, (Math.PI/180)*0, (Math.PI/180)*40, false);
ctx.lineTo(50+Math.cos((Math.PI/180)*40)*40, 50+Math.sin((Math.PI/180)*40)*40);
ctx.strokeStyle = 'red';
ctx.closePath();
ctx.stroke();
ctx.fill();

http://jsfiddle.net/8s94grup/2/