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

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

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 для справки.


canvas html geometric-arc kineticjs
person Brian Graham    schedule 19.01.2012    source источник

Ответы (2)


arrow_upward
11
arrow_downward

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

http://jsfiddle.net/HETvZ/

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

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

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

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

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

person Simon Sarris    schedule 19.01.2012

arrow_upward
0
arrow_downward

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

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);
person Nazia Naheed    schedule 17.07.2017