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