HTML5: заполнить круг / дугу в процентах

Question

Вот мой псевдокод:

var percentage = 0.781743; // no specific length
var degrees = percentage * 360.0;
var radians = degrees * Math.PI / 180.0;

var x = 50;
var y = 50;
var r = 30;
var s = 1.5 * Math.PI;

var context = canvas.getContext('2d');
context.beginPath();
context.lineWidth = 5;
context.arc(x, y, r, s, radians, false);
context.closePath();
context.stroke();

Я использую библиотеку KineticJS, чтобы контролировать формы, которые я делаю, и перерисовывать их по мере необходимости. Моя проблема в том, что приведенный выше код не работает вообще. Я предполагаю, что у меня неверная математика, потому что если я изменю radians что-то вроде 4.0 * Math.PI Это рисует весь круг.

Я использовал HTML5 Canvas Arc Tutorial для справки.

Answer 1

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

http://jsfiddle.net/HETvZ/

Я думаю, что ваше замешательство связано с тем, что делает стартовый угол. Это не означает, что он начинается в этой точке, а затем добавляет радианы endAngle к нему. Это означает, что угол начинается в этой точке и заканчивается в конечной точке радиан.

Так что, если вы начинаете Angle равным 1,0, а endAngle равным 1,3, вы увидите только дугу в 0,3 радиана.

Если вы хотите, чтобы все работало так, как вы думаете, вам нужно добавить startAngle к своему endAngle:

context.arc(x, y, r, s, radians+s, false);

Как в этом примере: http://jsfiddle.net/HETvZ/5/

Answer 2

Ваш код просто отлично. вам нужно иметь: s=0, т.е. начальная точка должна быть нулевой. и если вы хотите, чтобы круг начинал рисовать сверху, вы можете использовать: context.rotate(-90 * Math.PI / 180); но после вращения вам нужно будет проверить аргументы arc()'s x,y. я использовал это как:

context.rotate(-90 * Math.PI / 180);
context.arc(-200, 200, 150, startPoint, radian, false); 
context.lineWidth = 20;
context.strokeStyle = '#b3e5fc';
context.stroke();
context.closePath();

после этого мне нужно было отображать процент в текстовой форме, поэтому я сделал:

context.rotate(90 * Math.PI / 180);
context.fillStyle = '#1aa8ff';
context.textAlign = 'center';
context.font = "bold 76px Verdana";;
context.textBaseline = "middle";
context.fillText("50%", 200, 200);