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

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

4 голосов
/ 19 января 2012

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

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

Ответы [ 2 ]

9 голосов
/ 19 января 2012

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

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/

0 голосов
/ 17 июля 2017

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