HTML Canvas рисует дугу между двумя точками - PullRequest
Новая
       54

HTML Canvas рисует дугу между двумя точками

4 голосов
/ 26 марта 2011

Я нашел похожие вопросы там, но ответа нет. Я набросал круг, как это 

ctx.strokeStyle='rgb(0,0,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();

, который дает круг, расположенный в точке (100,100) с радиусом 45, плюс 5 для ширины линии, что делает его кругом с радиусом 50. Теперь я хочу нарисовать точно такой же круг, но другого цвета, и только 1/4 оригинальной окружности (вспомним красное кольцо гибели XBOX 360). Итак, я попробовал это 

ctx.strokeStyle='rgb(0,250,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI/2,true);    //use 1/4 of original angle
ctx.closePath();
ctx.stroke();

Но у этого есть действительно раздражающий аспект соединения первой и последней точек (иногда мне интересно, кто создал элемент canvas, например, при встраивании текста, но не заставляйте меня начинать с этого ...)

1 Ответ

7 голосов
/ 26 марта 2011

Я прокомментировал строку, которую вы не хотите. Позвонив по номеру closePath(), вы закрываете путь своей дуги.

Пример

3/4 Arc

JavaScript 

ctx.strokeStyle='rgb(0,250,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI/2,true);    //use 1/4 of original angle
//ctx.closePath();
ctx.stroke();

jsFiddle .

...