CODEWITHSUNDEEP
javascripthtml
Justin Seals
Justin Seals

Reputation: 79

How to draw a percentage of an outline of a circle

I'm looking to draw a line around multiple circles, but only a percentage of the way round. Specifically I will need to be entering specific percentage's dynamically to draw these circles, so my current method of starting and ending angle is causing problems:

var data = [
    {id:'firefox', angle:90-90},
    {id:'chrome', angle:144},
    {id:'ie', angle:72},
    {id:'opera', angle:28.8},
    {id:'safari', angle:7.2}
];
data.forEach(function(e){
    var canvas = document.getElementById(e.id);
    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(64, 64, 60, 1.5*Math.PI, e.angle, true);
    context.lineWidth = 8;
    context.lineCap = "round";
    context.strokeStyle = '#c5731e';
    context.stroke();
});

Upvotes: 1

Views: 1963

Answers (1)

BreyndotEchse
BreyndotEchse

Reputation: 2230

var data = [
    {id:'firefox', percent:100},
    {id:'chrome', percent:50},
    {id:'ie', percent:25},
    {id:'opera', percent:33.33},
    {id:'safari', percent:66.66}
];
data.forEach(function(e){
    var canvas = document.getElementById(e.id);
    var context = canvas.getContext('2d');

    var startAngle = 1.5 * Math.PI;                  //Top of the arc
    var endAngle = (2 * Math.PI) / 100 * e.percent;  //"2 * PI" = 360° 
                                                     //and "/ 100 * e.percent" = e.percent%

    context.beginPath();
    context.arc(64, 64, 60, startAngle, startAngle - endAngle, true);
                                                     //substract(!) end from start, because we are going ANTIclockwise!
    context.lineWidth = 8;
    context.lineCap = "round";
    context.strokeStyle = '#c5731e';
    context.stroke();
});

See comments ;)

Docs:

http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/

Upvotes: 1

Related Questions