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

Я пытаюсь разместить текст внутри моего полукруга, графика. Я упростил для вас дугу 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. Но я не могу разместить текст в конце дуги. Может ли кто-нибудь помочь мне решить эту проблему? Спасибо.

html canvas

27.05.2019 14:45

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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);