Как я могу заполнить текст в конце моей дуги?

Question

Я пытаюсь разместить текст внутри своего полукруга, графика.Я упростил для вас дугу context.arc(92.5, 92.5, 72.5, 3.141592653589793, 3.7699111843077517, false); Я хочу поместить значение 2 в конце дуги, поскольку дуга составляет 20% от общего значения.

До сих пор я пробовал

context.translate(centerX, centerY);
context.save();
context.translate(x, y);
context.fillText('2', 0, 3);
context.restore();

Я пытался найти точку перехвата x и y, используя (?−ℎ)2+(?−?)2=?2.Но я не могу поместить текст в конце дуги.Может кто-нибудь, пожалуйста, помогите мне решить это?Спасибо.

Answer 1

Вам нужно будет найти точку, где заканчивается дуга:

let x = center.x + radius * Math.cos(endArc);
let y = center.y + radius * Math.sin(endArc);

В этом случае центр круга находится в точке {x: 92.5, y: 92.5}, радиус равен 72.5,и конечная дуга 3.7699111843077517.

Надеюсь, это то, о чем вы спрашивали.

const ctx = canvas.getContext("2d");
let cw = canvas.width = 200;
let ch= canvas.height = 200;
ctx.beginPath();
ctx.arc(92.5, 92.5, 72.5, 3.141592653589793, 3.7699111843077517, false);
ctx.stroke();
//find the point where the arc ends
let x = 92.5 + 72.5 * Math.cos(3.7699111843077517);
let y = 92.5 + 72.5 * Math.sin(3.7699111843077517);
// draw the text
ctx.font="12px Arial";  
ctx.textAlign="center";
ctx.textBaseline="bottom"; 
ctx.fillText("2",x,y);

canvas{border:1px solid}

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