Ad

JS Canvas - Multiple Color Arc Borders Based On Percentage

- 1 answer

I'm trying to make a script that will automatically create a circle based on three different percentages. It will look something like this:

enter image description here

The values I have are: const percents = [0.26, 0.42, 0.32]

Here's my functions to draw a section:

const arc = (val, r, x, y, w, h, color, ctx, start) => {
    x = 500;
    y = 300;
    ctx.strokeStyle = color;
    ctx.lineWidth = 10;
    ctx.beginPath();
    let offset = 1.5 * Math.PI * start;
    ctx.arc(x, y, r, offset, ((percentToRadians(val)) + offset));
    ctx.stroke();
}
function degreesToRadians (degrees) {
    return degrees * (Math.PI/180);
 }
function percentToRadians(percentage) {
    var degrees = percentage * 360;
    return degreesToRadians(degrees);
}

and then I call it three times for each percentage:

arc(shot, r, x, y, w, h, "orange", ctx, 0); //0.26
//team
arc(team, r, x, y, w, h, "purple", ctx, shot); //0.42
//sport
arc(sport, r, x, y, w, h, "green", ctx, team); //0.32

But my output looks like:

enter image description here

Ad

Answer

Here is an option:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function circle(x, y, r, f1, f2) {
  ctx.lineWidth = 20;
  ctx.strokeStyle = "orange";
  ctx.beginPath();
  start = 0
  ctx.arc(x, y, r, start, Math.PI * f1 *2);
  ctx.stroke();
  
  ctx.strokeStyle = "purple";
  ctx.beginPath();
  start = Math.PI * f1 *2
  ctx.arc(x, y, r, start, start + Math.PI * f2 *2);
  ctx.stroke();
  
  ctx.strokeStyle = "green";
  ctx.beginPath();
  start = start + Math.PI * f2 *2
  ctx.arc(x, y, r, start, Math.PI * 2);
  ctx.stroke();
}

circle(50, 50, 40, 1/4, 1/3)
circle(130, 120, 40, 1/8, 2/3)
circle(210, 50, 40, 1/3, 1/3)
circle(290, 120, 40, 1/9, 1/9)
<canvas id="canvas" height=170 width=400></canvas>

On the function circle I'm doing the drawing of the 3 arcs, the colors are hardcoded for simplicity you can change that if you want, and the f1 and f2 are the fraction of the circle taken by the first and second color, it should be simple to integrate into your project.

Ad
source: stackoverflow.com
Ad