Saturday, 10 August 2013

How to draw a percentage of an outline of a circle

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();
});

No comments:

Post a Comment