Javascript 如何将标签置于量规JS之外

我有一个问题，我创建了自定义量表，但在这个量表之外，我想用值显示标签

对于创建仪表，我使用：gauge.min.js

所以我想用%的数字来表示外部的标准值

我的代码：

html:

效率
测试

JS:

let canvas=document.getElementById（'gauge'）；
让context=canvas.getContext（'2d'）；
设lowerBadLimit=50；
设下限=70；
设lowerGoodLimit=85；
让nominalValue=100；
设上限=110；
设上限为120；
设上限BaadLimit=150；
var全局值=[]；
var gaugeStart=0；
var-gaugeEnd=100；
var输入值=150；
var poinenetValue=0；
函数drawGaugeSegment（画布、上下文、x、y、beginPercent、endPercent、颜色）{
让beginAngle=Math.PI+（Math.PI*（beginPercent/100））；
设endAngle=0-（Math.PI*（1-endPercent/100））；
context.strokeStyle=颜色；
context.lineWidth=60；
context.beginPath（）；
弧（x，y，170，起始角，终止角）；
stroke（）；
}
函数DrawPinele（画布、上下文、x、y、百分比、颜色）{
context.fillStyle=颜色；
语境。翻译（x，y）；
旋转（Math.PI*percent/100-Math.PI/2）；
设针宽=15；
设针长=130；
context.beginPath（）；
弧（0,0，needleWidth/2,0，Math.PI）；
moveTo（0-needleWidth/2,0）；
lineTo（0，0-针长度）；
lineTo（针宽/2,0）；
context.lineTo（0-针宽/2,0）
context.fill（）；
}
函数drawGauge（画布、上下文、x、y）{
drawGaugeSegment（画布、上下文、x、y、gaugeStart、全局值[0]-1'#FF6363'）；
drawGaugeSegment（画布，上下文，x，y，全局值[0]，全局值[1]-1'，#FEF567'）；
drawGaugeSegment（画布、上下文、x、y、全局值[1]，全局值[2]-1'，#70FE67'）；
drawGaugeSegment（画布，上下文，x，y，全局值[2]，全局值[3]-1，#70FE67'）；
drawGaugeSegment（画布，上下文，x，y，全局值[3]，全局值[4]-1，#FEF567'）；
drawGaugeSegment（画布、上下文、x、y、全局值[4]，gaugeEnd，#FF6363'）；
DrawPineer（画布、上下文、x、y、poinenetValue，#fff'）；
}
函数gaugeCalc（）{
var valueRange=上限BaadLimit-下限BaadLimit；
var GaugerAge=gaugeEnd-gaugeStart；
var刻度=计量器量程/数值范围；
var gaugeZone1=（下限接受限制-下限接受限制）*标度；
var gaugeZone2=（lowerGoodLimit-LowerBaddLimit）*量表；
var gaugeZone3=（名义值-下限）*标度；
var gaugeZone4=（上限-下限）*标度；
var gaugeZone5=（上限-下限）*标度；
var值=[gaugeZone1、gaugeZone2、gaugeZone3、gaugeZone4、gaugeZone5]；
全局值=值；
var convertedValue=（getValue（）-lowerBadLimit）*比例；
if（转换值<仪表启动）{
poinenetValue=仪表启动；
console.log（poinenetValue）；
}否则如果（转换值>计量值）{
波涅涅特值=标准值；
console.log（poinenetValue）；
}否则{
poinenetValue=转换值；
console.log（poinenetValue）；
}
}
函数getValue（val）{
val=$（'#number'）.val（）；
返回val；
}
函数changeData（）{
gaugeCalc（）；
画（）
changeEffValue（）
}
函数changeEffValue（）{
document.getElementById（'eff'）。innerHTML=getValue（）+'%'；
}
函数绘图（）{
画布宽度=550；
canvas.height=250；
拉力计（帆布，背景，260，225）；
}
gaugeCalc（）
draw（）；

举个例子，现在我有：

我希望有这样的价值观：

---

因此，正如您所看到的，在我的代码中，我不可能添加标签外侧量规。

您可以直接在画布中包含文本（请参阅）

例如，在

drawGaugeSegment

中，您已经有了量规的中心和角度，您所需要的只是一些数学知识

这里我将

215

作为显示文本的圆的半径，

-6

和

+3

是固定的小调整，因为

fillText

的x/y是文本的一角，而不是中心（值可能会根据文本的字体大小/长度而变化）

这就给出了

context.fillText（endPercent，x-6+parseInt（Math.cos（endAngle）*215），y+3+parseInt（Math.sin（endAngle）*215））


let canvas=document.getElementById（'gauge'）；
让context=canvas.getContext（'2d'）；
设lowerBadLimit=50；
设下限=70；
设lowerGoodLimit=85；
让nominalValue=100；
设上限=110；
设上限为120；
设上限BaadLimit=150；
var全局值=[]；
var gaugeStart=0；
var-gaugeEnd=100；
var输入值=150；
var poinenetValue=0；
函数drawGaugeSegment（画布、上下文、x、y、beginPercent、endPercent、颜色、文本）{
让beginAngle=Math.PI+（Math.PI*（beginPercent/100））；
设endAngle=0-（Math.PI*（1-endPercent/100））；
context.strokeStyle=颜色；
context.lineWidth=60；
context.beginPath（）；
弧（x，y，170，起始角，终止角）；
stroke（）；
context.fillText（text，x-6+parseInt（Math.cos（endAngle）*215），y+3+parseInt（Math.sin（endAngle）*215））；
}
函数DrawPinele（画布、上下文、x、y、百分比、颜色）{
context.fillStyle=颜色；
语境。翻译（x，y）；
旋转（Math.PI*percent/100-Math.PI/2）；
设针宽=15；
设针长=130；
context.beginPath（）；
弧（0,0，needleWidth/2,0，Math.PI）；
moveTo（0-needleWidth/2,0）；
lineTo（0，0-针长度）；
  <canvas id="gauge"></canvas>
            <span id="gauge1-txt"></span>
            <div class="gaugeData">   
                <h1>Efficency</h1>
                <h1 id="eff"></h1>
                <input type="number" id="number" />
            </div>
            <button onclick="changeData()">test</button>

let canvas = document.getElementById('gauge');
let context = canvas.getContext('2d');
let lowerBadLimit = 50;
let loweAcceptLimit = 70;
let lowerGoodLimit = 85;
let nominalValue = 100;
let upperGoodLimit = 110;
let upperAcceptLimit = 120;
let upperBaadLimit = 150;
var globalValues = [];
var gaugeStart = 0;
var gaugeEnd = 100;
var inputValue = 150;
var poinenetValue = 0;


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

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

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

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

    let needleWidth = 15;
    let needleLength = 130;

    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, gaugeStart, globalValues[0] - 1, '#FF6363');
    drawGaugeSegment(canvas, context, x, y, globalValues[0], globalValues[1] - 1, '#FEF567');
    drawGaugeSegment(canvas, context, x, y, globalValues[1], globalValues[2] - 1, '#70FE67');
    drawGaugeSegment(canvas, context, x, y, globalValues[2], globalValues[3] - 1, '#70FE67');
    drawGaugeSegment(canvas, context, x, y, globalValues[3], globalValues[4] - 1, '#FEF567');
    drawGaugeSegment(canvas, context, x, y, globalValues[4], gaugeEnd, '#FF6363');

    drawNeedle(canvas, context, x, y, poinenetValue, '#fff');
}

function gaugeCalc() {
    var valueRange = upperBaadLimit - lowerBadLimit;
    var gaugeRange = gaugeEnd - gaugeStart;
    var scale = gaugeRange / valueRange;
    var gaugeZone1 = (loweAcceptLimit - lowerBadLimit) * scale;
    var gaugeZone2 = (lowerGoodLimit - lowerBadLimit) * scale;
    var gaugeZone3 = (nominalValue - lowerBadLimit) * scale;
    var gaugeZone4 = (upperGoodLimit - lowerBadLimit) * scale;
    var gaugeZone5 = (upperAcceptLimit - lowerBadLimit) * scale;

    var values = [gaugeZone1, gaugeZone2, gaugeZone3, gaugeZone4, gaugeZone5];

    globalValues = values;

var convertedValue = (getValue() - lowerBadLimit) * scale;

            if (convertedValue < gaugeStart) {
                poinenetValue = gaugeStart;
                console.log(poinenetValue);
            } else if (convertedValue > gaugeEnd) {
                poinenetValue = gaugeEnd;
                console.log(poinenetValue);
            } else {
                poinenetValue = convertedValue;
                console.log(poinenetValue);

            }
        }

function getValue(val) {
            val = $('#number').val();
            return val;
        }

function changeData() {
            gaugeCalc();
            draw()
            changeEffValue()
        }

function changeEffValue() {
            document.getElementById('eff').innerHTML = getValue() + ' %';
        }


 function draw() {
            canvas.width = 550;
            canvas.height = 250;
            drawGauge(canvas, context, 260, 225);
        }


        gaugeCalc()
        draw();