Обход ошибки полукруга холста в Chrome

Похоже, кто-то упомянул об этой ошибке на форумах Chromium, но решения не было, поэтому мне интересно, знает ли кто-нибудь обходной путь.

Проблема заключается в попытке отобразить полукруг против часовой стрелки в Chrome с использованием элемента canvas. Вместо этого это отображает полный круг:

var ctx = document.getElementById('can').getContext('2d');
ctx.beginPath();
ctx.arc(50,50,50,0,Math.PI*3,true);
ctx.fill();
ctx.closePath();

Вот скрипка, просмотрите не в хроме, а затем в хроме: скрипка


javascript google-chrome html5-canvas geometric-arc
person anson    schedule 05.12.2011    source источник
comment
Половина круга против часовой стрелки - это от 0 до Math.PI, если я не правильно понял ваш вопрос. В настоящее время вы рисуете один полный круг и еще одну половину, фактически рисуя полный круг.   -  person pimvdb    schedule 05.12.2011
comment
Хорошим обходным решением может быть попытка использовать Math.PI вместо Math.PI*3 - я знаю, что это хакерство, но оно позволяет обойти эти чертовы школьные ошибки геометрии.   -  person Darek Rossman    schedule 05.12.2011
comment
@pimvdb: Нет, не с холстом, движущимся против часовой стрелки. В этом случае все браузеры отображают полукруг, но Chrome   -  person anson    schedule 05.12.2011
comment
Идея здесь не в том, чтобы начать с угла 0 и пройти Math.PI * 3, а в том, чтобы начать с угла 0 и остановиться в точке, которая соответствует Math.PI * 3, именно так работает метод дуги холста.   -  person anson    schedule 05.12.2011
comment
Здесь я получаю ожидаемые результаты: jsfiddle.net/eGjak/220. Как выглядит ваш ожидаемый круг?   -  person pimvdb    schedule 05.12.2011
comment
Да, если вы заметили, что в хроме на рисунке pi*3 отображается полный круг (при вращении против часовой стрелки), а в нехромированном — полукруг (при вращении против часовой стрелки)   -  person anson    schedule 05.12.2011

Ответы (1)


arrow_upward
2
arrow_downward

Ошибка, вероятно, связана с эта часть спецификации:

Если аргумент против часовой стрелки опущен или ложен, а endAngle-startAngle равен или больше 2π, или, если аргумент против часовой стрелки истинен, а startAngle-endAngle равен или больше 2π, то дуга представляет собой всю окружность этой окружности. .

Похоже, что Chrome не соблюдает вторую часть этого утверждения (т. е. когда anticlockwise равно true).

Почему бы не нормализовать конечную точку?

var end = 3 * Math.PI;
while (end > 2 * Math.PI) {
    end -= 2 * Math.PI;
}
person Wayne    schedule 05.12.2011
comment
Да, я помню, как искал вокруг и видел это, и подумал, что, возможно, это может быть связано с этим. Спасибо за вашу помощь. Я думаю, что этот фрагмент кода очень хорошо подойдет для того, что я пытаюсь сделать. - person anson; 05.12.2011
comment
Просто обратите внимание, что это исправлено в версии 31.0.1650.63 Chrome (и, возможно, во многих версиях до этого) - person Wayne; 06.01.2014