JS如何更改画布规格的开始值

Question

我使用javascript创建画布规格，但我希望起始值是 50 ，而我的规格值应从 0 开始。

所以我的代码是HTML：

 <canvas id="gauge"></canvas>

Javascript：

let canvas = document.getElementById('gauge');
let context = canvas.getContext('2d');

function drawGaugeSegment(canvas, context, x, y, beginPercent, endPercent, color) {
    let beginAngle = Math.PI + (Math.PI * (beginPercent / 150));
    let endAngle = 0 - (Math.PI * (1 - endPercent / 150));

    context.strokeStyle = color;
    context.lineWidth = 60;

    context.beginPath();
    context.arc(x, y, 150, beginAngle, endAngle);
    context.stroke();
}

function drawNeedle(canvas, context, x, y, percent, color) {
    context.fillStyle = color;
    context.translate(x, y);
    context.rotate(Math.PI * percent / 150 - Math.PI / 2);

    let needleWidth = 20;
    let needleLength = 80;

    context.beginPath();
    context.arc(0, 0, needleWidth / 2, 0, Math.PI);
    context.moveTo(0 - needleWidth / 2, 0);
    context.lineTo(0, 0 - needleLength);
    context.lineTo(needleWidth / 2, 0);
    context.lineTo(0 - needleWidth / 2, 0)
    context.fill();
}

function drawGauge(canvas, context, x, y) {
    drawGaugeSegment(canvas, context, x, y, 50, 70, '#FF6D6D');
    drawGaugeSegment(canvas, context, x, y, 70, 85, '#FDFF6D');
    drawGaugeSegment(canvas, context, x, y, 85, 100, '#FFD36D');
    drawGaugeSegment(canvas, context, x, y, 100, 105, '#7CFF6D');
    drawGaugeSegment(canvas, context, x, y, 105, 115, '#7CFF6D');
    drawGaugeSegment(canvas, context, x, y, 115, 150, '#6DBAFF');
    drawGaugeSegment(canvas, context, x, y, 115, 150, '#FF6D6D');
    drawNeedle(canvas, context, x, y, 50, '#fff');
}


function draw() {
    canvas.width = 550;
    canvas.height = 550;

    drawGauge(canvas, context, 225, 225);
}

draw();

对于管理脚本，我使用外部JS文件，该文件称为 gauge.min.js 。

所以我想要的是，您可以看到我的测量仪起始值是50 ，但是如果我输入起始值50，则量规视图不是corect。

示例值从50开始：

也许可以通过某些方式更改engle或类似方法来解决此问题。