JS画布-基于百分比的多个彩色弧形边框

Question

我正在尝试制作一个脚本，该脚本将基于三个不同的百分比自动创建一个圆。它看起来像这样：

我的值是：const percents = [0.26, 0.42, 0.32]

这是我绘制部分的功能：

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

然后我为每个百分比叫三遍：

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

但是我的输出看起来像：

Answer 1

这是一个选择：

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>

在function circle上，我正在绘制3个圆弧，为简单起见，颜色进行了硬编码，如果需要，可以更改颜色，而f1和f2是第一个圆所占圆的比例第二种颜色，应该很容易集成到您的项目中。