SOURCE

let A = 50;
let B = 50;
let radius = 50;
let startAngle = 0.5 * Math.PI;
// let startAngle = 0;
let whiteRound = 30;

function angleToRadius(num) {
    let radius = (num / (A + B)) * 100;
    let angle = 2 * Math.PI * radius / 100;
    return angle
}

// 使用DOM方法得到画布
var myCanvas = document.querySelector("#canvas");
// 使用画布的上下文
var ctx = myCanvas.getContext("2d");
// 笔触
// 弧也是笔触
ctx.beginPath();
ctx.moveTo(radius, radius);
ctx.arc(radius, radius, radius, startAngle, startAngle + angleToRadius(A), true); // 设置路径
ctx.fillStyle = "#00ff00";
ctx.fill(); // 画圆弧

ctx.beginPath();
ctx.moveTo(radius, radius);
ctx.arc(radius, radius, radius, startAngle + angleToRadius(A), startAngle, true); // 设置路径
ctx.fillStyle = "#ff0000";
ctx.fill(); // 画圆弧

ctx.beginPath();
ctx.arc(radius, radius, whiteRound, 0, 2 * Math.PI, true); // 设置路径
ctx.fillStyle = "#fff";
ctx.fill(); // 画圆弧

//1. 使用`font`设置字体。
ctx.font = "12px serif";
//2. 使用`fillStyle`设置字体颜色。
ctx.fillStyle = "#000";
//3. 使用`fillText()`方法显示字体。

function cosFun(angle) {
    let val = Math.cos(startAngle + (angle / 2)) * radius + 50;
    return val;
}

function sinFun(angle) {
    let val = Math.sin(startAngle + (angle / 2)) * radius + 50;
    return val;
}

ctx.fillText(A + "%", cosFun(angleToRadius(A)), sinFun(angleToRadius(A)));
ctx.fillText(B + "%", cosFun(angleToRadius(B)), sinFun(angleToRadius(B)));

ctx.closePath();

<canvas id="canvas" height="100" width="100"></canvas>